React Native - KeyboardAvoidingView avec pied de page collant

Question

J'essaie de créer un pied de page collant avec le composant KeyboardAvoidingView dans React Native. Je suis très proche de l'accomplissement de cette tâche, cependant, quand le clavier se lève, le pied de page remonte mais rétrécit en même temps.

est ici à quoi il ressemble avant que le clavier arrive:

Et voici à quoi il ressemble après le clavier arrive:

Comme vous pouvez le voir, le conteneur de soumission est plus petit qu'il ne l'est avant qu'il y ait un clavier.

Voici mon code actuel:

render() {  
    return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding"> 
     <View style={{ flex: 1, }}> 
     <TextInput 
      placeholder="Username" 
      value={this.state.username} 
      style={Styles.textInput} 
      onChangeText={(username) => this.setState({ username })} 
      autoCorrect={false} 
     /> 
     <TextInput 
      style={Styles.textInput} 
      placeholder="Email" 
      value={this.state.email} 
      onChangeText={(email) => this.setState({ email })} 
      autoCorrect={false} 
     /> 
     </View> 
     <View style={{ height: 100, backgroundColor: 'blue' }}> 
     <Text>Submit</Text> 
     </View> 
    </KeyboardAvoidingView> 
); 

Qu'est-ce que je fais mal?

Answer 1

Essayez le code suivant, mettez le pied de page sur la couche externe de scrollview et keyboardAvoidingView.

<ScrollView padder scrollEnabled={true}> 
    <KeyboardAvoidingView 
    behavior="padding" 
    keyboardVerticalOffset={70} 
    > 
    <View style={{ flex: 1, }}> 
    <TextInput 
     placeholder="Username" 
     value={this.state.username} 
     style={Styles.textInput} 
     onChangeText={(username) => this.setState({ username })} 
     autoCorrect={false} 
    /> 
    <TextInput 
     style={Styles.textInput} 
     placeholder="Email" 
     value={this.state.email} 
     onChangeText={(email) => this.setState({ email })} 
     autoCorrect={false} 
    /> 
    </View> 
</KeyboardAvoidingView> 
</ScrollView> 
<View style={{ height: 100, backgroundColor: 'blue' }}> 
    <Text>Submit</Text> 
</View>