react-native - KeyboardAvoidingView 不适用于 TabNavigator

Question

我在 tabnavigator 中有组件。在我的组件中，我有多行文本，所以当我在 InputText 键盘上输入多行时，我想使用 KeyboardAvoidingView 在键盘显示时推送屏幕。
这是我的代码:

class UselessTextInput extends Component {
    render() {
        return (
            <TextInput
                {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
                editable={true}
                autoFocus={false}
                placeholder={Const.TEXT_INPUT_DELETE_ACCOUNT}
                //maxLength={10000} 
                underlineColorAndroid='rgba(0,0,0,0)'
                placeholderTextColor={'gray'}
            />
        );
    }
}

class SettingProfileDetail extends React.Component {
render(){
 return (

            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <Text style={styles.textTitle}>
                    {Const.REASONDELETEACCOUNT}
                </Text>
                <UselessTextInput
                    style={styles.textInput}
                    multiline={true}
                    numberOfLines={1}
                    onChangeText={(text) => this.setState({ reason: text })}
                    value={this.state.reason}
                />
            </KeyboardAvoidingView >

        );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
    },
    textTitle: {
        fontFamily: font.bold,
        textAlign: 'center',
        color: '#666666',
        marginTop: 20,
        marginBottom: 18
    },
    textInput: {
        fontFamily: font.normal,
        marginLeft: 10,
        marginRight: 10,
        padding: 0
    },
});

这是我的结果:


只有当我在 TabNavigator 上的组件中添加代码时才会发生这种情况，当在 App.js 中添加时它工作正常
我该如何修复我的错误？
非常感谢!

Answer 1

我遇到了同样的问题，尽管我有一种不同的方法，它基本上会在键盘出现时计算和定位(使用 translateY) View 。

我已经在这里发布了，请访问 react-native-spacer更多默认