用于多组件布局的 React flexbox 对齐答案

【问题标题】：React flexbox alignment for multi-component layout用于多组件布局的 React flexbox 对齐
【发布时间】：2017-06-19 05:32:58
【问题描述】：

这里是菜鸟问题，但我有点卡在这里。如果我想用 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>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs react-native flexbox

【解决方案1】：

react-native 默认使用flex-direction: 'column'。请尝试以下操作：

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

【讨论】：