Как выровнять элемент с 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>
Как мне сделать укладку так, как я хочу? Заранее спасибо.
Ответы 3
Чтобы текст располагался внизу, просто поместите его после FlatList.
<View>
<FlatList/>
<TextInput/>
</View>
Да, точно.. :/
Вы можете использовать этот код, чтобы прикрепить 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"/>
(Код не проверял, меняйте цифры, если они неточные)
Мне интересно, почему это не работает для вас! flex: 1 для представления контейнера заставляет TextInput прилипать ко дну, а FlatList - к вершине для меня
Я не знаю, дружище, но я нашел решение, вы также можете проверить это.
взгляните на мою правку. используйте "Размеры", чтобы задать динамическое поле. приятный код :)
Ребят я сам нашел решение. Иногда нам нужно думать легко, поэтому я использовал 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>
установка статического числа для marginTop может вызвать проблемы в дифференцированном устройстве. Лучше не использовать абсолютное позиционирование, кроме критических ситуаций.
Вместо marginTop: 440 попробуйте с bottom: 0. Так безопаснее.
ОК, проверю :) Спасибо!
Да внизу: 0 сработало и выглядит намного безопаснее, спасибо tarik!
В этом случае ему придется прокрутить страницу до конца, чтобы увидеть ввод. Что ему нужно сделать, так это позиционировать ввод как абсолютный и прикрепить его к нижней части экрана. Я создам пример, если у вас будет время.