React Native TextInput 在被选中时会缩小，我该如何阻止它？

Question

我是 React Native 的新手，我目前正在开发一个应用程序，在登录屏幕上，当我 select 电子邮件或密码字段出现键盘时，整个屏幕都在缩小，我该如何预防？

在 selecting TextInput 之前：

在 selecting TextInput 之后：

这是渲染函数和样式：

render() {
        return (

            <View style={styles.container}>

                <View style={styles.image} >

                    <LoginBubble />

                </View>

                <Text style={styles.appName}>App Name</Text>

                <Text style={styles.lipsum} >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>

                <View style={styles.input}>


                    <View style={styles.icon}>
                        <EmailIcon />
                    </View>


                    <TextInput
                        style={styles.emailInput}
                        placeholder="Email"
                        onChangeText={(text) => this.setState({ email: text })}
                        onSubmitEditing={Keyboard.dismiss}
                        autoCapitalize="none"
                        placeholderTextColor="#29374E"
                    />

                </View>

                <View style={styles.input}>

                    <View style={styles.icon}>
                        <PasswordIcon />
                    </View>

                    <TextInput
                        style={styles.passwordInput}
                        placeholder="Password"
                        secureTextEntry={true}
                        onChangeText={(text) => this.setState({ password: text })}
                        onSubmitEditing={Keyboard.dismiss}
                        autoCapitalize="none"
                        placeholderTextColor="#29374E"
                    />

                </View>

                <TouchableOpacity
                    style={styles.loginButton}
                >

                    <Text style={styles.loginButtonText} >Login</Text>

                </TouchableOpacity>

                <TouchableOpacity>

                    <Text style={styles.help}>Need help?</Text>

                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create(
    {
        container:
        {
            justifyContent: "center",
            flex: 1,
            backgroundColor: "white",
            marginTop: getStatusBarHeight()
        },
        image:
        {
            justifyContent: "center",
            alignItems: "center",
            marginTop: "-5%"
        },
        appName:
        {
            fontSize: 36,
            color: "#29374E",
            alignSelf: "center",
            fontWeight: "700",
            marginTop: "2%",
            //fontFamily: "Inter-SemiBoldItalic"
        },
        lipsum:
        {
            color: "#AABCD0",
            alignSelf: "center",
            width: "60%",
            marginBottom: "7%",
            textAlign: "center"
        },
        input:
        {
            borderColor: "#DEE8F3",
            borderWidth: 1,
            marginTop: 10,
            fontSize: 16,
            borderRadius: 32,
            height: "8%",
            marginHorizontal: 16,
            //fontFamily: "Arboria-Book",
            flexDirection: "row",
            justifyContent: "flex-start",
            alignItems: "center",
        },
        icon:
        {
            padding: 16
        },
        emailInput:
        {
            //marginLeft: "5%",
            width: "86%",
            fontSize: 16,
        },
        passwordInput:
        {
            marginLeft: "1%",
            width: "86%",
            fontSize: 16
        },
        loginButton:
        {
            backgroundColor: "#2276D8",
            borderRadius: 41,
            height: "8%",
            justifyContent: "center",
            marginTop: 10,
            marginHorizontal: 16
        },
        loginButtonText:
        {
            fontSize: 18,
            color: "white",
            alignSelf: "center",
        },
        help:
        {
            fontSize: 16,
            color: "#2276D8",
            alignSelf: 'center',
            marginTop: "10%"
        }
    }
);

export default LoginScreen;

Answer 1

看看这个：

https://www.freecodecamp.org/news/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580/

对此有一些解决方案

Answer 2

在android\app\src\main\AndroidManifest.xml

chnage -> android:windowSoftInputMode="adjustResize" 到 "adjustPan"

React Native TextInput 在被选中时会缩小，我该如何阻止它？

React Native TextInput shrinks when selected, how can I stop it?

keyboard

textinput

shrink

reactjs

react-native