React Native - Sticky Footerを使用したKeyboardAvoidingView

Question

KeyboardAvoidingViewの成分がReact Nativeのスティッキーフッタを作成しようとしています。私はこの仕事を達成するのに非常に近いですが、キーボードが登場すると、フッターは上がりますが、同時に高さが低くなります。ここで

は、キーボードが立ち上がる前に、それは次のようになります。

そして、ここでは、キーボードが立ち上がった後、それは次のようになります。

あなたが見ることができるように、サブミットコンテナは、キーボードが存在する前より小さくなります。私は間違って何をやっている

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

：

は、ここに私の現在のコードですか？

Answer 1

次のコードを試してください。フッターをscrollviewと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>