REACT NATIVE：我在底部添加了一张图片。现在我的键盘打不开了

Question

我在手机屏幕底部添加了一张图片，样式为：

bottomView: {
    position: 'absolute',
    bottom: 0, 
},

这张图上面是我的签到表，但是因为图片在绝对位置，所以打不开键盘。我不想让这张照片成为相对的，因为它会扰乱画面。任何人都可以以这种方式帮助我，我也想将图片保留在底部但也想打开键盘。

完整代码为：

import React from "react";
import { Image, StyleSheet, Text, View ,TextInput,KeyboardAvoidingView} from "react-native";
import Authentication_Button from "./Authentication_Button";
import { SocialIcon } from 'react-native-elements'


const Login = () => {

    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    return(
        
      <KeyboardAvoidingView   behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container} enabled>
        {/* <View style={styles.container}> */}
          <Image source={require('./assets/Logo.png')} style={styles.logo}/>     
                     
          <TextInput
              label="Email"
              value={email}
              onChangeText={email => setEmail(email)}
              style={styles.TXT_INPUT}
              placeholder="Email"
          />
          <TextInput
              label="Password"
              value={password}
              onChangeText={password => setPassword(password)}
              style={styles.TXT_INPUT}
              placeholder="Password"
          />
          <View style={styles.auth}>
            <Authentication_Button title={"Login"} backGroundColor={"#2c88d1"}  textColor = {"#FFFFFF"} borderColor={"#2c88d1"}/>
            
            <Authentication_Button title={"Signup"} backGroundColor={"#FFFFFF"}  textColor = {"#2c88d1"} borderColor={"#2c88d1"}/>
          </View>
          <Text>- OR -</Text>
          <Text>Sign in with </Text>
          

          <SocialIcon
                raised={true}
                type='google'
                style={{backgroundColor:"#2c88d1"}}
            />
          

          <KeyboardAvoidingView style={styles.bottomView}>
            <Image source={require('./assets/footLogin.png')} />
          </KeyboardAvoidingView>

        {/* </View> */}
        </KeyboardAvoidingView>

   )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:"#effdfe",
    justifyContent:"center",
    alignItems:"center",
    padding:20
  },
  logo :{
    width:150,
    height:150,
    resizeMode:'cover'
  },
  TXT_INPUT:{
    marginBottom:10,
    marginTop:10,
    borderRadius:12,
    borderWidth:1.4,
    width:"85%",
    paddingVertical:14,
    backgroundColor:"#ffffff",
    color:"#000000",
    fontSize:18
  },  

  auth:{
    marginTop:10,
    marginBottom:10,
    width:"85%",
  },
  bottomView: {
    marginTop:'5%',
    position: 'absolute', //Here is the trick
    bottom: 1, //Here is the trick
  },
});

export default Login;

Answer 1

您可以使用 KeyboardAvoidingView 作为父视图。它会帮助你无论是你的内部按钮还是视图是一个绝对位置

 <KeyboardAvoidingView
  behavior={Platform.OS === "ios" ? "padding" : "height"}
  style={styles.container}
>
</KeyboardAvoidingView>

Answer 2

所以问题已经解决了。问题是页脚图像基本上位于文本输入字段的顶部，所以我一改变位置，它就开始工作了！

REACT NATIVE：我在底部添加了一张图片。现在我的键盘打不开了

REACT NATIVE: I have added a picture on bottom. Now my keyboard is not opening

android

image

stylesheet

ios

react-native