针对多组件布局反应flexbox对齐

Question

Noob在这里提问，但我有点卡在这里。如果我想创建一个类似于图像中的布局的反应（精确反应）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>

任何帮助都会非常感激。

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