Реагировать выравнивание гибкой коробки для многокомпонентной компоновки

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>