reactjs - 如何在 React-Native 中将元素与 Flatlist 对齐

Question

所以我在react-native中渲染消息，实际上我想制作一个典型聊天的视觉结构(其中文本输入在底部对齐，消息在顶部)

但是我不知道如何在 React-Native 中做到这一点， 这是它的样子 https://ibb.co/muJino

这是我的代码:

<View>

                <View style={{justifyContent: 'space-between'}}>
                    <TextInput
                        placeholder="Message"
                        onChangeText={Message => this.setState({message: Message})}
                    />
                    <Button title="Send"/>
                </View>


                <FlatList
                    data={this.state.chats}
                    renderItem={this._renderItem}
                    keyExtractor={this._keyExtractor}
                />

</View>

如何才能实现我想要的样式？提前致谢。

Answer 1

伙计们，我自己找到了解决方案。有时我们需要轻松思考，所以我使用了位置:'绝对'，现在它保持我想要的样子。

<View style={{position: 'absolute', width: "100%", backgroundColor: 'beige', bottom: 0}}>
       <TextInput
              placeholder="Message"
              onChangeText={Message => this.setState({message: Message})}
         />
      <Button title="Send"/>
</View>

https://ibb.co/gTjD58