如何修复我在 Expo react-native 中使用 KeyboardAwareView 或 react-native-keyboard-aware-scroll-view 时显示的白色键盘空间? [英] How do fix the white keyboard space that shows whenever I use KeyboardAwareView or react-native-keyboard-aware-scroll-view in my Expo react-native?

问题描述

我正在使用 Expo - react-native 创建应用程序，但使用 KeyboardAvoidingView 和其他键盘包 (react-native-keyboard-aware-scroll-view) 在屏幕底部显示空白.我该如何解决?(https://i.stack.imgur.com/1c0M6.jpg) 有尝试了 KeyboardAvoidingView 和 react-native-keyboard-aware-scroll-view 但问题仍然存在

I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this? (https://i.stack.imgur.com/1c0M6.jpg) have tried KeyboardAvoidingView and react-native-keyboard-aware-scroll-view but the problem still persist

       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
   },
 });

推荐答案

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

I checked and modify your code in react native ios. The following code might be helpful for you.

    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
},
});

如果你在 android 中运行上面的代码然后改变 behavior={"height"}

If you run the above code in android then change behavior={"height"}

这篇关于如何修复我在 Expo react-native 中使用 KeyboardAwareView 或 react-native-keyboard-aware-scroll-view 时显示的白色键盘空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！