时间戳

首页 > 解决方案 > 如何在 React-Native 中将元素与 Flatlist 对齐

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

问题描述

所以我在 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>

我怎样才能做我想要的造型？提前致谢。

标签： reactjsreact-native

解决方案

伙计们，我自己找到了解决方案。有时我们需要轻松思考，所以我使用了 position : 'absolute' ，现在它保持我想要的状态。

<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

推荐阅读