无法了解Keyboard，AvoidingView如何，何时或何时在Expo中使用React Native工作

Question

在开发了一个应用程序几个月后，今天我重新制作了登录屏幕，屏幕上充满了各种样式和问题，我说，嘿！借助我本月收集的所有样式定位知识，让它变得新鲜，有什么地方会出错？

当然，KeyboardAvoidingView出错了，它总是出错了，直到今天，我仍然不明白为什么有时有效，有时却无效。

我的意思是屏幕的蓝色区域是KeyboardAvoidingView内的区域：

如您所见，它什么都不做，甚至都不起作用（在Android和iOS中均不可用）：

这是我的代码，不要管代码中的样式，完成后我将其移至styles const：

  return (
        <View style={[styles.container, {alignItems: 'center'}]}>
          <Image
            source={require('../assets/images/anawin-logo.png')}
            style={styles.image}
          />
          <KeyboardAvoidingView style={{flex: 1, width: '100%', alignItems: 'center', backgroundColor: 'blue' }} enabled>
            <TextInput
              keyboardType="email-address"
              onChangeText={(email) => this.setState({ email })}
              placeholder="Correu electrònic"
              placeholderTextColor ="#dedede"
              autoCapitalize = "none"
              underlineColorAndroid="transparent"
              style={styles.input}
              value={email}
            />
            <View style={{flexDirection: 'row', marginTop: 10}}>
              <TextInput
                onChangeText={(password) => this.setState({ password })}
                ref={(input) => { this.secondTextInput = input; }}
                value={password}
                placeholder="Contrassenya"
                secureTextEntry={safetyPassword}
                placeholderTextColor="#dedede"
                underlineColorAndroid="transparent"
                style={styles.input}
              />
              <Icon
               containerStyle={{right: 10, top: 5, position: 'absolute'}}
               onPress={() => this.setState({safetyPassword : safetyPassword ? false : true})}
               size={32}
               color='white'
               underlayColor="#9c0b4e"
               type="font-awesome"
               name={safetyPassword ? 'eye-slash' : 'eye'} />
             </View>
             <View style={{marginTop: 50, flexDirection: 'row'}}>
              <Image
                source={require('../assets/images/raim-blanc.png')}
                style={styles.imageRaim}
              />
              <TouchableOpacity
                onPress={() => {
                    this._onLogin(email, password)
                  }}
                title="Conectar-se"
                accessibilityLabel="Conectar-se"
              >
                <Text style={styles.textLogin}> Connectar-se </Text>
              </TouchableOpacity>
            </View>
          </KeyboardAvoidingView>
          <View style={{marginTop:100, marginBottom: 20}}>
              <TouchableOpacity style={styles.contrasenya} onPress={this._Recovery.bind(this)} >
                  <Text style={{ fontSize: 14, textAlign: 'center', color: 'white'}} > No recordes la teva contrassenya? </Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.nouCompte} onPress={this._Contacto.bind(this)} >
                  <Text style={{ fontSize: 14, textAlign: 'center', color: Color.corporatiu}} > Sol·licitar un compte </Text>
              </TouchableOpacity>
            </View>
        </View>
      )

以及已经使用的样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.corporatiu,
    paddingTop: 20,
  },
  image: {
    width: '90%',
    resizeMode: 'contain',
  },
  textLogin: {
    color: 'white',
    fontSize:28,
    fontFamily: 'Kushan',
  },
  input: {
   width: '90%',
   fontSize: 20,
   padding: 10,
   color: 'white',
   borderBottomWidth:1,
   borderColor: 'white',
 },
 imageRaim: {
   width: 35,
   height: 35,
   marginTop: 0,
   marginLeft: -10,
   resizeMode: 'contain',
 },
 nouCompte:{
   backgroundColor:'white',
   padding: 10,
 },
 contrasenya:{
   marginBottom:5,
   paddingBottom:15,
 }
});

如果有人可以给我带来光明，我会非常高兴，例如，嘿，您不能使用flex，元素需要具有固定的高度或类似的高度，因为我现在处于黑暗状态。