android - TextInput 未显示在焦点上

Question

当我点击它时，我有一个名为电子邮件或用户名的文本输入，它不显示我键入的值，我认为这是因为屏幕尺寸，无论如何我可以调整 Textinput 以便当我单击它，全文输入显示，我可以看到我输入的值。它下方的其他文本输入显示，但未显示，我应该将其包装在 ScrollView 中，请提供任何帮助，谢谢。

这是页面 当我点击电子邮件或用户名时

将 View 包裹在 ScrollView 中会带来这种情况 我的代码

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

使用状态变量将 ScrollView(包装您的内容)的 scrollEnabled 属性设置为 true 或 false 根据键盘是否显示。因此，当显示键盘时，将启用滚动。

在您的内容底部添加一个条件 View，它具有一些 height，当显示键盘时它是 Activity 的，因此您将能够滚动。

记住这一点:

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}