Question

所以我在react-native中呈现消息，实际上我想将视觉结构作为典型的聊天（其中textinput在底部对齐，消息在顶部）

但我不确切知道如何在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

伙计们，我自己找到了解决方案。有时候我们需要思考容易，所以我使用了位置：＆＃39;绝对＆＃39;现在它就像我想要的一样。

<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

Answer 2

要在底部输入文本，只需将其放在FlatList之后。

<View>
    <FlatList/>
    <TextInput/>
</View>

Answer 3

您可以使用此代码将TextInput粘贴到屏幕底部，将FlatList粘贴到屏幕顶部：

<View style={{ flex: 1 }}>
     <FlatList data={this.data}
          renderItem={({ item, index }) => {
              return (
                  <Text>{item}</Text>
              )
          }} 
     />
     <View style={{ flexDirection: 'row' }}>
          <Button title={'send'} onPress={() => { }} />
          <TextInput style={{ flex: 1, borderWidth: 1 }} />
     </View>
</View>

我希望它会有所帮助。

修改

对于绝对定位，最好动态设置位置，如下所示：

<View style={{position: 'absolute', width: "100%", backgroundColor: 'beige', marginTop: (Dimensions.get('window').height - 60) }}> <TextInput style={{height:30}} placeholder="Message" onChangeText={Message => this.setState({message: Message})} /> <Button style={{height:30}} title="Send"/>

（我没有检查代码，如果不准确则更改数字）

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

3 个答案: