【问题标题】:My components are compressing when i use the keyboard当我使用键盘时,我的组件正在压缩
【发布时间】:2020-06-12 19:02:25
【问题描述】:

我的问题是当我使用键盘时,我的所有组件都被压缩了,我想知道为什么会发生这种情况以及我可以做些什么来防止这种情况发生?

这是我的代码 我使用 image_height 导出

@react-native-community/masked-view": 0.1.6 世博会:^37.0.0 反应:16.9.0 react-dom": "16.9.0

render() {
    return (

        <Animated.View style={styles.container}
            behavior={Platform.OS == "ios" ? "padding" : "height"}>
            {/* <View style={styles.statusBar} /> */}
            <View style={{ height: '12%' }}></View>
            <View style={styles.content}>

                <Text style={styles.title}>asdada</Text>

                <View style={[styles.inputContainer, { marginTop: "15%" }]}>
                    {/* <Image style={styles.inputIcon} source={require('./Imagenes/mail_login.png')}/> */}
                    <TextInput style={styles.inputs}
                        placeholder="Correo"
                        placeholderTextColor="#848484"
                        underlineColorAndroid='transparent'
                        onChangeText={(email) => this.setState({ email })} />
                </View>
                <View style={{ height: '70%', width: '100%', flexDirection: 'column', alignItems: 'center', marginTop: '10%' }}>
                    <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => this.login()}>
                        <Text style={styles.loginText}>Ingresar</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </Animated.View >
    );
}
}

在样式中,我使用带 % 的宽度和高度,例如 width: '10%

【问题讨论】:

    标签: react-native expo


    【解决方案1】:

    View 没有任何名为 behavior 的道具,您应该为此使用 keyboardavoidingview

    https://reactnative.dev/docs/keyboardavoidingview.

    或者你也可以使用这个。

    https://github.com/APSL/react-native-keyboard-aware-scroll-view

    【讨论】:

      猜你喜欢
      • 2014-11-14
      • 1970-01-01
      • 1970-01-01
      • 2022-07-27
      • 2013-04-06
      • 2015-09-19
      • 1970-01-01
      • 2016-10-28
      • 1970-01-01
      相关资源
      最近更新 更多