Question

我正在尝试使用FlexBox进行本机UI反应。但是当键盘弹出时，它会弄乱UI。看一下截图和代码。我认为我的FlexBox代码有问题。它试图根据给定的弹性值来划分元素之间的剩余屏幕空间。

            <View style={loginWrapperStyle}>
                <Card>
                    <View style={logoWrapperStyle}>
                        <Image
                            source={require('./logo.png')}
                            style={logoStyle} />
                    </View>
                    <View style={loginFormStyle}>
                        <TextBox 
                            placeholder='Useraname/Email'
                            autoCorrect={false}
                            value={this.state.username}
                            onChangeText={(val) => this.setState({ username: val })} />

                        <TextBox 
                            placeholder='Password'
                            secureTextEntry
                            autoCorrect={false}
                            value={this.state.password}
                            onChangeText={(val) => this.setState({ password: val })} />
                    </View>

                    <View style={loginButtonWrapperStyle}>
                        <Button>
                            Login
                        </Button>
                    </View>
                </Card>
            </View>

const styles = {
    loginWrapperStyle: {
        padding: 15,
        backgroundColor: '#7CB142',
        flex: 1,
    },
    logoWrapperStyle: {
        flex: 2
    },
    logoStyle: {
        flex: 1,
        width: null,
        height: null,
        resizeMode: 'contain',
        marginTop: 10
    },
    loginFormStyle: {
        flex: 1
    },
    loginButtonWrapperStyle: {
        flex: 1,
        padding: 15,
        justifyContent: 'center',
        alignItems: 'center',
    }
};

Answer 1

您可以试用KeyboardAvoidingView，它是最简单的解决方案，也是最容易安装的。您已将代码包装在KeyboardAvoidView中，然后向其中添加行为道具。

还有一个KeyboardAwareScrollView（https://github.com/APSL/react-native-keyboard-aware-scroll-view）可以解决您的问题。

在https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

进行了很好的演示

ReactNative - FlexBox UI在键盘打开时搞砸了

1 个答案: