无法弄清楚如何正确使用 KeyboardAvoidingView

Question

我正在使用 React Native 开发一个应用程序，我们有设计师制作的屏幕布局。但我无法正确实现预期的行为。基本上它是一个带有一些文本输入和一个按钮的屏幕，我需要在键盘出现时正确调整的东西。以下是预期的屏幕：

\n

\n

\n

因此，当键盘出现时，按钮必须向上移动很多，两个文本输入都会向上移动一点，并且顶部的文本保持不变。没有键盘时屏幕看起来很完美，但现在键盘出现时它什么也不做。我尝试了很多东西，但没有任何效果。现在是渲染方法：

\n

render() {\n    const textInputBorderColor = this.state.hasError ? Colors.error : Colors.background;\n    const textInputCpfMarginTop = this.state.hasError ? 24 : 48;\n\n    return (\n        <View style = {styles.container}>\n            <KeyboardAvoidingView behavior=\'padding\'>\n                <Text style = {styles.headerText}>Vamos come\xc3\xa7ar!</Text>\n                \n                <TextInput \n                    value = {this.props.user.name} \n            onChangeText = {text => this.props.user.name = text}\n                    placeholder = \'Insira aqui seu nome completo\'\n                    style = {[styles.textInputName, {borderColor: textInputBorderColor}]}\n                />\n\n                <ErrorText show = {this.state.hasError} value = {this.state.errorMsg}/>\n\n                <TextInputMask\n                    value = {this.props.user.cpf}\n                    onChangeText = {text => this.props.user.cpf = text}\n                    placeholder = \'e aqui seu CPF\'\n                    keyboardType = \'numeric\'\n                    type = \'cpf\'\n                    style = {[styles.textInputCpf, {borderColor: Colors.background, marginTop: textInputCpfMarginTop}]}\n                />\n            \n                <View style = {{marginTop: 202}}>\n                    <DefaultButton \n                        onPress = {this.onButtonPress}\n                        btnLabel = \'Continuar\'\n                        disabled = {(this.props.user.name == \'\' || this.props.user.cpf.length != 14)}\n                    />\n                </View>\n            </KeyboardAvoidingView>\n        </View>\n    );\n}\n

\n

款式：

\n

const styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: \'#FFFFFF\',\n        alignItems: \'center\',\n    },\n\n    textInputName: {\n        textAlign: \'center\',\n        fontFamily: \'Roboto-Light\',\n        fontSize: 16,\n        paddingBottom: ScreenDimensions.width * 0.01,\n        borderBottomWidth: 1,\n        marginTop: 96,\n        width: 321\n    },\n\n    textInputCpf: {\n        textAlign: \'center\',\n        fontFamily: \'Roboto-Light\',\n        fontSize: 16,\n        paddingBottom: ScreenDimensions.width * 0.01,\n        borderBottomWidth: 1,\n        width: 321\n    },\n    \n    headerText: {\n        marginTop: 66,\n        textAlign: \'center\',\n        fontFamily: \'Roboto-Light\',\n        fontSize: 20,\n        color: \'#000\'\n    }\n})\n

\n

该组件（keyboardAvoidingView）的文档毫无价值......

\n

非常感谢您的帮助！

\n

Answer 1

忘记发布对我们有用的内容。经过一些测试，我们找到了可行的解决方案。我们将文本输入包围在 a 中ScrollView，以便在使用小屏幕设备时它可以正常工作，并且只用 包围按钮KeyboardAvoidingView。两者都被外层包围View。

这是一个例子：

<View style = {{flex: 1, alignItems: 'center', justifyContent: 'flex-end'}}>
  <ScrollView 
    contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
    style={{ alignSelf: 'stretch' }}
  >
    # Your Text Inputs
  </ScrollView>

  <KeyboardAvoidingView
    behavior='padding'
    keyboardVerticalOffset={Platform.OS == 'ios' ? Header.HEIGHT + getStatusBarHeight() : Header.HEIGHT + 32}
    style={{ flex: 1, justifyContent: 'flex-end', alignSelf: 'stretch', marginBottom: 16 }}
  >
    # Yout Button
  </KeyboardAvoidingView>
</View>

旁注：在 ScrollViews 中使用文本输入和按钮时要小心（这不是我的解决方案的情况），因为有一个小问题，您无法在键盘打开的情况下单击按钮。