Question

我正在使用react native开发应用程序，我们有设计师设计的屏幕布局。但是我无法正确实现预期的行为。基本上，这是一个带有一些文本输入和一个按钮的屏幕，键盘启动时，我需要正确调整内容。以下是预期的屏幕：

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

render() {
    const textInputBorderColor = this.state.hasError ? Colors.error : Colors.background;
    const textInputCpfMarginTop = this.state.hasError ? 24 : 48;

    return (
        <View style = {styles.container}>
            <KeyboardAvoidingView behavior='padding'>
                <Text style = {styles.headerText}>Vamos começar!</Text>

                <TextInput 
                    value = {this.props.user.name} 
            onChangeText = {text => this.props.user.name = text}
                    placeholder = 'Insira aqui seu nome completo'
                    style = {[styles.textInputName, {borderColor: textInputBorderColor}]}
                />

                <ErrorText show = {this.state.hasError} value = {this.state.errorMsg}/>

                <TextInputMask
                    value = {this.props.user.cpf}
                    onChangeText = {text => this.props.user.cpf = text}
                    placeholder = 'e aqui seu CPF'
                    keyboardType = 'numeric'
                    type = 'cpf'
                    style = {[styles.textInputCpf, {borderColor: Colors.background, marginTop: textInputCpfMarginTop}]}
                />

                <View style = {{marginTop: 202}}>
                    <DefaultButton 
                        onPress = {this.onButtonPress}
                        btnLabel = 'Continuar'
                        disabled = {(this.props.user.name == '' || this.props.user.cpf.length != 14)}
                    />
                </View>
            </KeyboardAvoidingView>
        </View>
    );
}

样式：

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems: 'center',
    },

    textInputName: {
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 16,
        paddingBottom: ScreenDimensions.width * 0.01,
        borderBottomWidth: 1,
        marginTop: 96,
        width: 321
    },

    textInputCpf: {
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 16,
        paddingBottom: ScreenDimensions.width * 0.01,
        borderBottomWidth: 1,
        width: 321
    },

    headerText: {
        marginTop: 66,
        textAlign: 'center',
        fontFamily: 'Roboto-Light',
        fontSize: 20,
        color: '#000'
    }
})

有关此组件的文档（keyboardAvoidingView）一文不值...

非常感谢您的帮助！

Answer 1

尝试一下：

const keyboardAvoidingViewBehaviour = (Platform.OS === 'ios') ? 'padding' : null;

使用KeyboardAvoiding视图作为根组件，不需要额外的视图。

        <KeyboardAvoidingView 
           behavior={keyboardAvoidingViewBehaviour}
           style = {styles.container} // <-- have flex: 1 as one of the style props here
        >
            <Text style = {styles.headerText}>Vamos começar!</Text>

            <TextInput
            // ...

如果您的内容需要滚动，那么一个不错的选择是：

react-native-keyboard-aware-scroll-view

https://github.com/APSL/react-native-keyboard-aware-scroll-view

Answer 2

忘记发布对我们有用的内容。经过一些测试，我们能够找到一个可行的解决方案。我们将文本输入括在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中使用文本输入和按钮时要小心（这不是我的解决方案），因为存在一个小问题，您无法用键盘单击该按钮打开。

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

2 个答案: