Question

我正在设置一个新组件，并且键盘覆盖了这些字段

这是一个新组件

<KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={50} enableAutomaticScroll={true}>
                    <View style={{ paddingHorizontal: 20 }}>

                        <View>
                            <FloatingLabelInput
                                onRef={(ref) => {
                                    this.inputs['firstName'] = ref
                                }}
                                onSubmitEditing={() => {
                                    this.focusNextField('lastName')
                                }}
                                label={i18n.t('t_driver_registration_first_name_label')}
                                onChangeText={(text) => this.onChangeInputText('firstName', text)}
                                keyboardType='default'
                                maxLength={20}
                                value={form.firstName}
                                labelStyle={Style.inputLabel}
                                basicColor={GStyle.GREEN}
                                inputTextColor={Color(GStyle.BLACK).alpha(.7)}
                                editable={mode !== DriverFormMode.EDIT}
                            />

我希望键盘不会覆盖我的领域。

Answer 1

在其中包装视图以自动滚动输入焦点。做：

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
                //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

<View style={Styles.row}>这只是一个样式表，例如创建一个新的StyleSheet：

const Styles = StyleSheet.create({ row: { borderRadius: 4, borderWidth: 0.5, borderColor: '#d6d7da', }, title: { fontSize: 19, fontWeight: 'bold', }, activeTitle: { color: 'red', }, });

使用样式表：

<View style={Styles.row}> <Text style={[Styles.title, this.props.isActive && styles.activeTitle]} /> </View>

如何修复键盘以隐藏React Native中的输入字段

1 个答案: