У меня есть текстовый ввод с именем электронной почты или именем пользователя, когда я нажимаю на него, он не показывает значения, которые я набираю, я думаю, что это из-за размера экрана, есть ли я в любом случае настроить Textinput так, чтобы, когда я нажимаю на него , полнотекстового ввода показывают, и я вижу свои значения набраны. Другие текстовые входы под ним показывают, но не показывают, если я заверну это в виде прокрутки, пожалуйста, любая помощь будет хорошей, Спасибо.

Это страница . введите описание изображения здесь когда я нажимаю на электронную почту или имя пользователя введите описание изображения здесь

перенос представления в представление прокрутки приносит это введите описание изображения здесь МОЙ КОД

 <View style={{
                height: 42, width: 72,
                backgroundColor: '#EFB879', marginTop: '15.15%',
                alignSelf: 'center'
            }}>
                <Text style={{
                    fontFamily: 'mont-bold',
                    fontSize: 34,
                    color: '#fff'
                }}>
                    sẹlẹ
                </Text>
            </View>
                <View style={{
                    width: '83.33%',
                    height: this.state.visible? 240 : 180,
                    backgroundColor: '#fff',
                    position: 'absolute',
                    bottom: 0,
                    alignSelf: 'center',
                    borderTopRightRadius: 20,
                    borderTopLeftRadius: 20,
                }}>
                    <View style={{
                        width: '100%',
                        height: 60,
                        backgroundColor: '#fff',
                        borderBottomWidth: 0.7,
                        borderColor: '#d9d8d8',
                        borderTopRightRadius: 6,
                        borderTopLeftRadius: 6,
                    }}>
                        <TextInput placeholder="Email or mobile number"
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 10,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}/>
                    </View>
                        <View style={{
                        width: '100%',
                        height: 60,
                        backgroundColor: '#fff',
                        borderBottomWidth: 0.7,
                        borderColor: '#d9d8d8',
                    }}>
                        <TextInput placeholder={picked}
                                   value={this.state.text}
                                   onChangeText={(text) => this.handleChange(text)}
                                   onFocus={() => this.setState({visible: true})}
                                   onBlur={() => this.setState({visible: false})}
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 10,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}
                        contextMenuHidden={true}/>
                    </View>

                    {this.state.visible ? <View style={{
                        justifyContent: 'flex-end',
                        height: 200,
                        width: '100%',
                    }}>
                        <Text  style={styles.textHead}>
                            Select your Institute
                        </Text>
                        {view}
                    </View> : <View hide={true} style={{
                        width: '100%',
                        height: 60,

                        backgroundColor: '#fff',
                        justifyContent: 'center'
                    }}>
                        <TextInput placeholder="Password"
                                   placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
                                   placeholderTextColor="#615D5D"
                                   underlineColorAndroid={'transparent'}
                                   secureTextEntry={true}
                                   style={{
                                       alignSelf: 'center',
                                       flex: 1,
                                       paddingTop: 10,
                                       paddingRight: 25,
                                       paddingBottom: 10,
                                       width: '85%',
                                       paddingLeft: 0,
                                       padding: 4,
                                       backgroundColor: '#fff',
                                       fontSize: 14, fontFamily: 'mont', color: '#615D5D',
                                   }}/><View style={{
                        width: 18, height: 11,
                        position: 'absolute', right: 25
                    }}>
                        <Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
                               source={require('../eye.png')}/>
                    </View>
                    </View>}
                </View>
            </View>
            <View style={{
                width: '83.36%',
                height: 60,
                backgroundColor: '#EFB879',
                alignSelf: 'center',
                justifyContent: 'center',
                alignItems: 'center',
                borderBottomRightRadius: 6,
                borderBottomLeftRadius: 6,
            }}>
                <Text style={{
                    fontFamily: 'mont-semi',
                    fontSize: 16,
                    color: '#fff'
                }}>
                    SIGN UP
                </Text>
            </View>
            <View
                style={{
                    height: 0,
                    width: 120,
                    borderBottomWidth: 1.2,
                    borderColor: '#d9d8d8',
                    alignSelf: 'center',
                    marginTop: '50%'
                }}>
            </View>
            <View style={{width: '100%',
                height: 2,flexDirection: 'row',
                //  alignSelf: 'center',
                justifyContent: 'center',
                marginTop: '5%'}}>
                <Text style={{
                    color: '#615D5D',
                    fontFamily: 'mont-medium',
                    fontSize: 14,
                    alignSelf: 'center',
                }}>
                    Already have an account? </Text>
                <TouchableNativeFeedback
                    onPressIn={() => this.setState({pressed: !this.state.pressed})}
                    onPressOut={() => this.setState({pressed: !this.state.pressed})}
                    onPress={this.onP.bind(this)}>
                    <Text
                        style={{
                            color: '#EFB779',
                            fontFamily: 'mont-medium',
                            fontSize: this.state.pressed? 16: 14,
                            alignSelf: 'center',}}>
                        SIGN IN
                    </Text>
                </TouchableNativeFeedback>
            </View>
        </View>
1
Adokiye Iruene 21 Авг 2018 в 20:58

3 ответа

Лучший ответ

Это работает для меня:

Используйте API Keyboard из React Native для настройки прослушивателей на клавиатуре.

this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

Используйте переменную состояния, чтобы установить scrollEnabled опору ScrollView (обертывающей ваше содержимое) в true или false в зависимости от того, отображается клавиатура или нет. Поэтому, когда клавиатура будет показана, прокрутка будет включена.

Внизу вашего контента добавьте условное View с некоторыми height, которое активно, когда отображается клавиатура, и вы сможете прокручивать.

Помните это:

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}
1
SebaKZ 22 Авг 2018 в 01:30

В первом и последнем textInput.try нет события onchangetext () для добавления его в ваш код.

constructor(props) {
super(props);
this.state = { email:'',text:'',password:'' };
}
...  

  <TextInput

    onChangeText={(email) => this.setState({email})}
    value={this.state.email}
  />
   <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />
   <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(password) => this.setState({password})}
    value={this.state.password}
  /> 

Я надеюсь, это поможет вам

0
MebGDR 21 Авг 2018 в 22:45

Поместите весь свой код в ScrollView и используйте фиксированные позиции для ваших представлений. Попробуй это.

0
Ümañg ßürmån 21 Авг 2018 в 18:07
51954288