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

如何解决选中时 React Native TextInput 会缩小，我该如何停止它？

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

在选择 TextInput 之前：

选择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",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",},icon:
        {
            padding: 16
        },emailInput:
        {
            //marginLeft: "5%",width: "86%",passwordInput:
        {
            marginLeft: "1%",fontSize: 16
        },loginButton:
        {
            backgroundColor: "#2276D8",borderRadius: 41,justifyContent: "center",marginHorizontal: 16
        },loginButtonText:
        {
            fontSize: 18,color: "white",help:
        {
            fontSize: 16,color: "#2276D8",alignSelf: 'center',marginTop: "10%"
        }
    }
);

export default LoginScreen;

解决方法

看看这个：

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

它有一些解决方案

,

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

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