Reagieren Flexbox Ausrichtung für Multi-Komponenten-Layout

Question

Noob Frage hier, aber ich bin hier irgendwie fest. Wenn ich ein Layout wie das im Bild mit reacts (reagieren nativ um genau zu sein) flexbox erstellen möchte, weiß jemand, wie man das macht?

Mein Ansatz für jetzt noch nicht gearbeitet:

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

Jede Hilfe sehr geschätzt werden würde.

Answer 1

reagieren-native verwendet flex-direction: 'column' standardmäßig. Versuchen Sie Folgendes:

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