React 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

反應天然默認使用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>