键盘避开视图-React-Native？

Question

我有一个注册屏幕“输入”，我希望用户选择的输入不隐藏其他内容，因此我将其包装在<KeyboardAvoidingView>内并设置了behavior "padding"，但是在选择了一些输入后，我看到了一个View覆盖了我所有的内容，所以我看不到任何东西“只是白色View”

所以也许我在使用时出错了，我该如何处理？

ScreenShot

这是我的代码

<KeyboardAvoidingView
behavior="padding"
keyboardVerticalOffset={Platform.select({
ios: () => 0,
android: () => 200,
})()}>
  <ScrollView>
    <View style={styles.imgContainer}>
    <Image
    style={styles.imgStyle}
    resizeMode="cover"
    source={require('../../assets/Logo.png')}
    />
    </View>
    <View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-person"
      size={20}
      color="#ddf"
      />
      <TextInput
      onChangeText={value => this.setState({userName: value})}
      value={userName}
      style={styles.inputStyle}
      placeholder="Name"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.NameValid}</Text>
      </View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-at"
      size={20}
      color="#ddf"
      />
      <TextInput
      onChangeText={value => this.setState({email: value})}
      value={email}
      style={styles.inputStyle}
      placeholder="Email"
      keyboardType="email-address"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.emailValid}</Text>
      </View>
      <View style={styles.inputContainer}>
      <Icon
      style={styles.iconStyle}
      name="md-call"
      size={20}
      color="#ddf"
      />
      <TextInput
      style={styles.inputStyle}
      placeholder="mobile"
      onChangeText={value => this.setState({phoneNumber: value})}
      value={phoneNumber}
      keyboardType="phone-pad"
      />
      </View>
      <View
      style={{
      marginTop: 0,
      marginLeft: 16,
      marginBottom: 0,
      }}>
      <Text>{this.state.phoneValid}</Text>
      </View>
      <View style={{...styles.inputContainer, marginBottom: 0}}>
      <Icon
      style={styles.iconStyle}
      name="md-lock"
      size={20}
      color="#ddf"
      />
      <TextInput
      secureTextEntry
      style={styles.inputStyle}
      placeholder="Password"
      value={password}
      onChangeText={value => this.setState({password: value})}
      />
      </View>
      <View
    style={{
    marginTop: 0,
    marginLeft: 16,
    marginBottom: 0,
    }}>
    <Text>{this.state.passwordValid}</Text>
    </View>
    </View>
    <View style={styles.buttonsContainer}>
      <TouchableOpacity
      onPress={() => this.signUp()}
      style={styles.btnStyle}>
      <Text style={[styles.textStyle, {color: '#fff', fontSize: 20}]}>
      Sign Up
      </Text>
      </TouchableOpacity>

      <View style={styles.textContainer}>
        <Text style={[styles.textStyle, {opacity: 0.7}]}>
        Do you have account?
        </Text>
        <TouchableOpacity onPress={() => navigation.navigate('SignIn')}>
        <Text style={styles.textStyle}> sign In </Text>
        </TouchableOpacity>
      </View>
    </View>
  </ScrollView>
</KeyboardAvoidingView>

样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imgContainer: {alignItems: 'center', marginVertical: 25},
  imgStyle: {width: 250, height: 150},
  inputContainer: {
    margin: 15,
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 30,
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconStyle: {
    marginLeft: 15,
  },
  inputStyle: {
    padding: 10,
    width: '85%',
    textAlign: I18nManager.isRTL ? 'right' : 'left',
  },
  buttonsContainer: {
    margin: 15,
    marginBottom: 20,
    justifyContent: 'flex-end',
  },
  btnStyle: {
    backgroundColor: '#1E558E',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 15,
    borderRadius: 30,
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 25,
  },
  textStyle: {color: '#1E558E', fontSize: 17},
});