Android 如何修复每当我在Expo react native中使用Keyboardawreview或react native键盘感知滚动视图时显示的白色键盘空间？

我在创建应用程序时使用Expo-react native，但使用KeyboardAvoidgView和其他键盘包（react native键盘感知滚动视图）在屏幕底部显示空白。我该如何解决这个问题？ （）已尝试键盘AvoidingView和react本机键盘感知滚动视图，但问题仍然存在

       import React, {Component} from 'react';
       import {StyleSheet,
       ScrollView,
       Text,ActivityIndicator,
       TouchableOpacity,
       TextInput,
        View,
        StatusBar,
       ImageBackground,
        KeyboardAvoidingView} from 'react-native';

       import { createStackNavigator, createAppContainer } from 'react- 
        navigation';
        import { KeyboardAwareView } from 'react-native-keyboard-aware- 
        view';
        import { AsyncStorage } from 'react-native';

        export default class LoginForm extends Component {
        render() {
         return (
           <KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
      <View style={styles.container}>
      <ScrollView style={{flex: 1}}>
    <StatusBar
      backgroundColor="transparent"
      barStyle="default"
      translucent={true}
    />
        <ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}>
        <View style={styles.title}>
          <Text style={styles.big}>AgroSight</Text>
          <Text style={styles.small}>An agro based app for farmers and persons</Text>
          {
          this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
        }
        </View>

        <View style={styles.formContainer}>
          <ScrollView style={{flex:1}}>
              <TextInput
              style={styles.input}
              placeholder="Email Address"
              returnKeyType="next"
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
              onSubmitEditing = {() => this.passwordInput.focus()}
              placeholderTextColor="rgba(255,255,255,.7)"
              name="email"
              onChangeText={(TextInput) => this.setState({userEmail: TextInput})}

            />
            <TextInput
              style={styles.input}
              placeholder="Password"
              returnKeyType="go"
              secureTextEntry
              ref={(input) => this.passwordInput = input}
              placeholderTextColor="rgba(255,255,255,.7)"
              name="password"
              onChangeText={(TextInput) => this.setState({password: TextInput})}
            />

            <TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
              <Text style={styles.buttonText}>LOG IN</Text>
            </TouchableOpacity>
            </ScrollView>
        </View>

        <View style={styles.bottomRow}>
          <Text style={styles.signupText}> Don't have account ?
              <Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
          </Text>
        </View>
        </ImageBackground>
          </ScrollView>
            </View>
    </KeyboardAwareView>
     );
   }
 }

  const styles = StyleSheet.create({
    container: {
     flex: 1,
    },
    title: {
     marginTop: 20,
     alignItems: "center",
     justifyContent:"center",
      height: "30%"
     },
big: {
  marginTop: 20,
  fontSize: 50,
  color: "white",
  alignItems:"center",
  fontWeight:"bold",
},
small: {
  marginTop: 4,
  fontSize: 20,
  color:"#FFF",
  fontWeight:"bold",
  opacity: .8
},
bottomRow: {
  padding: 20,
  justifyContent: "center",
  paddingVertical: 20
},
signupText: {
  fontSize: 21,
  color:"#FFF",
  fontWeight: "700",
  alignItems: "center"
},
 reg: {
   color: "#FED81E",
   alignItems: "center"
 },
 formContainer:{
   padding: 20,
   flex:1
 },
  input: {
    height: 50,
    backgroundColor: "green",
    color: "#FFF",
    paddingHorizontal: 10,
    marginBottom: 10,
    borderRadius: 7,
    fontSize: 20,
    paddingVertical: 10
  },
buttonContainer: {
  backgroundColor: "#FFF",
  paddingVertical: 15,
  borderRadius: 8
},
buttonText: {
  textAlign: 'center',
  color:"green",
  fontWeight: '700',
  fontSize: 27
},
Activity:{
  position: 'absolute',
  left: 0,
  right: 0,
  top: 150,
  bottom: 0,
  alignItems: 'center',
  justifyContent: 'center',
  zIndex: 999
   },
 });

import React，{Component}来自'React'；
导入{样式表，
滚动视图，
文本、活动指示器、，
可触摸不透明度，
文本输入，
看法
状态栏，
图像背景，
键盘avoidingview}来自“react native”；
从“反应”导入{createStackNavigator，createAppContainer}
导航'；
从“反应本机键盘感知-
视图'；
从“react native”导入{AsyncStorage}；
导出默认类LoginForm扩展组件{
render（）{
返回(
农业景观
面向农民和个人的基于农业的应用程序
{
this.state.ActivityLoader？：null
}
this.passwordInput.focus（）}
占位符textcolor=“rgba（255255255，.7）”
name=“电子邮件”
onChangeText={（TextInput）=>this.setState（{userEmail:TextInput}）}
/>
this.passwordInput=input}
占位符textcolor=“rgba（255255255，.7）”
name=“密码”
onChangeText={（TextInput）=>this.setState（{password:TextInput}）}
/>
登录
你没有帐户吗？
this.props.navigation.navigate（'RegisterScreen'）}>在此处注册
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
标题：{
玛金托普：20，
对齐项目：“中心”，
辩护内容：“中心”，
身高：“30%”
},
大：{
玛金托普：20，
尺寸：50，
颜色：“白色”，
对齐项目：“中心”，
fontWeight：“粗体”，
},
小型：{
玛金托普：4，
尺寸：20，
颜色：“FFF”，
fontWeight：“粗体”，
不透明度：.8
},
最底层：{
填充：20，
辩护内容：“中心”，
填充垂直：20
},
登录文本：{
尺寸：21，
颜色：“FFF”，
重量：“700”，
对齐项目：“中心”
},
注册：{
颜色：“FED81E”，
对齐项目：“中心”
},
formContainer：{
填充：20，
弹性：1
},
输入：{
身高：50，
背景颜色：“绿色”，
颜色：“FFF”，
水平方向：10，
marginBottom:10，
边界半径：7，
尺寸：20，
填充垂直：10
},
按钮容器：{
背景颜色：“FFF”，
填充垂直：15，
边界半径：8
},
按钮文字：{
textAlign:'中心'，
颜色：“绿色”，
重量：'700'，
尺码：27
},
活动：{
位置：'绝对'，
左:0,，
右:0,，
排名：150，
底部：0，
对齐项目：“居中”，
为内容辩护：“中心”，
zIndex:999
},
});

我在react native ios中检查并修改了您的代码。以下代码可能对您有所帮助

    import React, {Component} from 'react';
    import {StyleSheet,
    ScrollView,
    Dimensions,
    Text,ActivityIndicator,
    TouchableOpacity,
    TextInput,
    View,
    StatusBar,
    ImageBackground,
    KeyboardAvoidingView} from 'react-native';
    let {height, width} = Dimensions.get('window');


    export default class LoginForm extends Component {
    render() {
     return (
     <KeyboardAvoidingView behavior={"padding"} enabled  style= . 
     {{flexGrow:1,height:'100%'}}>
        <ScrollView bounces={false} >
            <StatusBar
            backgroundColor="transparent"
            barStyle="default"
            translucent={true}
            />
            <ImageBackground style={{width: "100%",height: height}} source={require('./bg.jpg')}>
            <View style={{flex:1}}>
                    <View style={styles.title}>
                        <Text style={styles.big}>AgroSight</Text>
                        <Text style={styles.small}>An agro based app for farmers and persons</Text>
                        {
          this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
        }
                    </View>

            <View style={{flex:2}}>
                    <TextInput
                    style={styles.input}
                    placeholder="Email Address"
                    returnKeyType="next"
                    keyboardType="email-address"
                    autoCapitalize="none"
                    autoCorrect={false}
                    onSubmitEditing = {() => this.passwordInput.focus()}
                    placeholderTextColor="rgba(255,255,255,.7)"
                    name="email"
                    onChangeText={(TextInput) => this.setState({userEmail: TextInput})}

                    />
                    <TextInput
                    style={styles.input}
                    placeholder="Password"
                    returnKeyType="go"
                    secureTextEntry
                    ref={(input) => this.passwordInput = input}
                    placeholderTextColor="rgba(255,255,255,.7)"
                    name="password"
                    onChangeText={(TextInput) => this.setState({password: TextInput})}
                    />

                    <TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
                        <Text style={styles.buttonText}>LOG IN</Text>
                    </TouchableOpacity>
            </View>

                    <View style={styles.bottomRow}>
                    <Text style={styles.signupText}> Don't have account ?
                    <Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
                    </Text>
                    </View>
                </View>
            </ImageBackground>
   </ScrollView>
</KeyboardAvoidingView>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
// height:'30%'
flex:1
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});

import React，{Component}来自'React'；
导入{样式表，
滚动视图，
尺寸，
文本、活动指示器、，
可触摸不透明度，
文本输入，
看法
状态栏，
图像背景，
键盘avoidingview}来自“react native”；
设{height，width}=Dimensions.get（'window'）；
导出默认类LoginForm扩展组件{
render（）{
返回(
农业景观
面向农民和个人的基于农业的应用程序
{
this.state.ActivityLoader？：null
}
this.passwordInput.focus（）}
占位符textcolor=“rgba（255255255，.7）”
name=“电子邮件”
onChangeText={（TextInput）=>this.setState（{userEmail:TextInput}）}
/>
this.passwordInput=input}
占位符textcolor=“rgba（255255255，.7）”
name=“密码”
onChangeText={（TextInput）=>this.setState（{password:TextInput}）}
/>
登录
你没有帐户吗？
this.props.navigation.navigate（'RegisterScreen'）}>在此处注册
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
标题：{
玛金托普：20，
对齐项目：“中心”，
辩护内容：“中心”，
//高度：'30%'
弹性：1
},
大：{
玛金托普：20，
尺寸：50，
颜色：“白色”，
对齐项目：“中心”，
fontWeight：“粗体”，
},
小型：{
玛金托普：4，
尺寸：20，
颜色：“FFF”，
fontWeight：“粗体”，
不透明度：.8
},
最底层：{
填充：20，
辩护内容：“中心”，
填充垂直：20
},
登录文本：{
尺寸：21，
颜色：“FFF”，
重量：“700”，
对齐项目：“中心”
},
注册：{
颜色：“FED81E”，
对齐项目：“中心”
},
formContainer：{
填充：20，
弹性：1
},
输入：{
身高：50，
背景颜色：“绿色”，
颜色：“FFF”，
水平方向：10，
marginBottom:10，
边界半径：7，
尺寸：20，
填充垂直：10
},
按钮容器：{
背景颜色：“FFF”，
填充垂直：15，
边界半径：8
},
按钮文字：{
textAlign:'中心'，
颜色：“绿色”，
重量：'700'，
尺码：27
},
活动：{
位置：'绝对'，
左:0,，
右:0,，
排名：150，
底部：0，
对齐项目：“居中”，
为内容辩护：“中心”，
zIndex:999
},
});

如果您在android中运行上述代码，则更改行为={“height”}

---

• [react native]相关文章推荐

• React native React native在android上的运行速度非常慢 react-native
• React native 反应本机调试错误 react-native
• React native 如何实现最小/最大宽度 react-native
• React native React native router flux：是否有一种统一的方法？ react-native
• React native 通过代理响应本机获取 react-nativeproxy
• React native 文本不显示在内部视图中 react-native
• React native 使用Redux进行本机反应：mapStateToProps（）-函数未更新 react-nativeredux
• React native React Native-带方括号的Fetch Body react-native
• React native 反应本机：componentDidMount无法显示获取数据 react-native
• React native 将本机fbsdk链接错误与FBSDKShareOpenGraphAction进行反应 react-native
• React native Waning访问视图管理器通过UIManager['；getConstants'；]直接从UIManager进行配置 react-nativenpm
• React native Jitsi Meet SDK-获取传入呼叫的推送警报 react-nativepush-notification
• React native React原生风格的textDecorationLine:'；下划线'；在iOS 13中不工作 react-native
• React native React native firebase-facebook登录未触发onAuthStateChanged侦听器 react-native
• React native 分别切换多个按钮的背景色 react-nativebutton
• React native 当收到正值时，动画将从屏幕上消失 react-native
• React native 使用RET本机映射时如何关闭键盘？ react-native
• React native 收到通知时反应本机Expo-通知句柄AppState react-nativenotifications
• React native 世博快餐中的矢量图标 react-native
• React native React native未在ios emulator中运行 react-native

---

• 随机文章推荐

• Pytorch 如何在ConvTranspose3d后获得torch.Size（[1,3,16,112,112]）而不是torch.Size（[1,3,16,64,64]） pytorch
• Pytorch model.training=False和model.param.require\u grad=False之间有什么区别 pytorch
• 带动量的pytorch群范数 pytorch
• Pytorch 将用于GPU计算的torch代码转换为仅在CPU上运行 pytorch
• Pytorch 如何在每个批次中创建具有不同元素的火炬对角线矩阵？ pytorch
• Pytorch 在Pytork中有没有生成张量分段函数的方法？ pytorch
• 使用pytorch优化器来适应用户定义的函数 pytorch
• Pytorch Pyrotch 1D辍学导致学习不稳定 pytorch
• Pytorch Pytork装置和.to（装置）方法 pytorch
• 对Pytorch中的张量应用一维卷积 pytorch
• 如何从pytorch DataLoader获取特定样本？ pytorch
• Pytorch 梯度等于'；无'； pytorch
• Pytorch导入错误：<；路径名>；：对象文件没有可加载的段 pytorch
• Pytorch LU和我使用torch.solver时的A不一样 pytorch
• 如何对具有多个标签的数据集使用Pytorch数据加载器 pytorch
• Pytorch 运行时错误：不支持将运算符cdist导出到ONNX opset版本9 pytorch
• PyTorch在使用tensorboard时加载旧数据 pytorch
• 如何在PyTorch中获得所选优化器的名称？ pytorch
• Pytorch 使用对抗性示例放大两个类之间的差异 pytorch
• 如何为PyTorch中的组合网络获得正确的梯度？ pytorch