Question

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

＆＃13;

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'}
            />
        );
    }
}

＆＃13;

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 >

        );
}
}

＆＃13;

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
    },
});

＆＃13;

这是我的结果：

只有当我在TabNavigator上添加组件中的代码时才会发生，当在App.js中添加它时它可以正常工作我如何修复我的错误？非常感谢你！

Answer 1

我遇到了同样的问题，虽然我有一种不同的方法，基本上会在键盘出现时计算和定位（使用translateY）视图。

我已在此处发布，请访问react-native-spacer以获取更多默认值

Answer 2

我遇到了类似的问题，并从@Hieu Jack Nguyen获得了灵感。仍然笨拙，但要好一些。

您可以在下面看到我的SO问题（包括视频和问题），并在评论中看到指向我的Gist的链接，我在其中复制了当前的实现。

React Native - Android - keyboardavoidingView in stackNavigator within a tabNavigator pushes bottomTabBar (clunky behaviour)

KeyboardAvoidingView无法使用TabNavigator

2 个答案: