如何在React-Native中將元素與Flatlist對齊

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

伙計們，我自己找到了解決方案。 有時我們需要思考容易，所以我使用的位置是：'絕對'，現在它仍然保持原樣。

<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

您可以使用此代碼將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"/>

（我沒有檢查代碼，如果不准確則更改數字）

Answer 3

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

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