React native 如何在React Native中将文本输入放在屏幕底部？

我制作了一个聊天应用程序，我想把文本输入放在页面底部，但我无法做到这一点。如果我尝试使用position:'absolute'+bottom:0，则显示为空。我想我在我的风格中有一个问题，我不确定

这是我的MessageScreen代码：

render() {
    return (
      <Wallpaper>
        <KeyboardAvoidingView behavior='padding'>
          <View>
          <TextInput
            style={styles.input}
            onChangeText={text => this.setState({ message: text })}
           // value={this.state.email}
            placeholderTextColor='white'
            underlineColorAndroid='transparent'
          />
            <Button onPress={this.send} title='SEND' />
              </View>
               </KeyboardAvoidingView>
      </Wallpaper>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    color: 'white',
    fontWeight: 'bold',
    backgroundColor: 'transparent',
    paddingLeft: 25
  },
  input: {
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    width: DEVICE_WIDTH ,
    height: 40,
    color: '#ffffff'
  },
 image: {
    width: 40,
    height: 40
  }
});

render（）{
返回(
this.setState（{message:text}）}
//值={this.state.email}
占位符textcolor='white'
“透明的”
/>
);
}
}
const styles=StyleSheet.create({
正文：{
颜色：'白色'，
fontWeight:'粗体'，
背景色：“透明”，
paddingLeft:25
},
输入：{
背景颜色：“rgba（255，255，255，0.4）”，
宽度：设备宽度，
身高：40，
颜色：“#ffffff”
},
图片：{
宽度：40，
身高：40
}
});

这是壁纸：

render() {
    return (
      <Image style={styles.picture} source={require('src/components/images/wallpaper.png')}>
        {this.props.children}
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  picture: {
    flex: 1,
    width: undefined,
    height: undefined,
    resizeMode: 'cover'
  }
});

render（）{
返回(
{this.props.children}
);
}
}
const styles=StyleSheet.create({
图片：{
弹性：1，
宽度：未定义，
高度：未定义，
resizeMode:“封面”
}
});

试试这个

<View style={styles.container}>
 <KeyboardAvoidingView 
   style={{position: 'absolute', left: 0, right: 0, bottom: 0}}
   behavior="position"
 >
  <TextInput
    style={styles.input}
    onChangeText={text => this.setState({ message: text })}
    // value={this.state.email}
    placeholderTextColor='white'
    underlineColorAndroid='transparent'
  />
  <Button onPress={this.send} title='SEND' />
 </KeyboardAvoidingView>
</View>

this.setState（{message:text}）}
//值={this.state.email}
占位符textcolor='white'
“透明的”
/>

---

可以找到工作示例

您将消息列表放在哪里？我想也许你可以通过为view

TextInput

提供包装器来实现这一点，并且查看消息列表是不同的，所以以后你可以在这两种方式中都使用。