Question

当我单击它时，我有一个名为电子邮件或用户名的文本输入，它没有显示我键入的值，我认为这是因为屏幕尺寸大，无论如何我可以调整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>

Answer 1

这对我有用：

使用React Native的Keyboard API在键盘上设置监听器。

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();
}

Answer 2

将整个代码放在ScrollView中，并在视图中使用固定位置。试试吧。

Answer 3

第一个和最后一个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}
  />

我希望这对您有帮助

TextInput没有显示在焦点上

3 个答案: