Javascript 多组件布局的React flexbox对齐

这里没有问题，但我被困在这里了。如果我想用react的react native创建一个像图中那样的布局，精确到flexbox，有人知道怎么做吗

目前我的方法不起作用：

<View style={{flex: 1, alignItems: 'stretch'}}>
  <View style={{flex: 1}}>
    <Text>Messages here</Text>
  </View>
  <View style={{alignSelf: 'flex-end'}}>
    <TextInput
      placeholder="Add your message"
      onChangeText={(text) => this.setState({text})} />
    <Button onPress={this.sendMessage}
      title="Send" />
    </View>
  </View>

任何帮助都将不胜感激

react native默认使用灵活方向：“列”。请尝试以下操作：

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <Text>Messages here</Text>
  </View>
  <View style={{height: 55, flexDirection: 'row', paddingHorizontal: 10}}>
    <TextInput
      style={{height: 44, flex: 1}}
      placeholder="Add your message"
      onChangeText={(text) => this.setState({text})}
    />
    <Button
      title="Send"
      style={{padding: 4}}
      onPress={this.sendMessage}
    />
  </View>
</View>