Question

我有一个带有两个输入和一个“下一步”按钮的页面。我想在键盘处于活动状态时向上移动容器，以便在键盘打开时也可以看到“下一步”按钮。我使用过KeyboardAvoidingView，但是当键盘处于活动状态时，内容没有移动。这里似乎是什么问题？

这是我的代码

    <View style={{height: '100%'}}>

          <LinearGradient colors={['#29aae1', '#4bc1b6']} style={{height: '100%'}}>

                <KeyboardAvoidingView
                    behavior="padding"
                    keyboardVerticalOffset={0}
                    style={{padding:10}}
                >

                        <ScrollView style={{height:'100%'}}>

                                <Text style={styles.signin_info}>Let's get you signed in. Provide your first name and last
                                    name.
                                    Do not
                                    worry, when you comment your real name won't be visible ;)</Text>


                                <Field label="First name" name="signUpFirstName" component={this.renderInput}/>
                                <Field label="Last name" name="signUpLastName" component={this.renderInput}/>



                            <TouchableOpacity block primary style={styles.nextBtn_active}
                                              onPress={Actions.signUp_email}><Text
                                style={{fontFamily: 'gotham', fontSize: 18, color: 'white'}}
                                allowFontScaling={false}>Next</Text></TouchableOpacity>

                        </ScrollView>

                </KeyboardAvoidingView>

        </LinearGradient>

   </View>

Answer 1

您的KeyboardAvoidingView组件不是enabled！ enabled属性是必填项：

<KeyboardAvoidingView
   behavior="padding"
   keyboardVerticalOffset={0}
   style={{padding:10}}
   enabled          // <-- this property is required
>

请参阅：enabled

Answer 2

If you already ScrollView inside KeyboardAvoidingView, consider using react-native-keyboard-aware-scroll-view instead.

ReactNative-KeyboardAvoidingView

2 个答案: