Цель: создать поле ввода текста, которое быстро расширяется по мере расширения строк ввода до определенного момента, как и большинство приложений для обмена сообщениями.
Проблема: когда ввод расширяется за 3 или 4 строки, вместо того, чтобы верхняя часть контейнера ввода расширялась вверх, контейнер ввода расширяется в зависимости от размера содержимого, как и должно быть, но контейнер перемещается за клавиатурой. / keyboard предложения слов, которые меняют положение кнопки слева (часть контейнера ввода), а также самого <TextInput>.
на рисунке ниже показано, как я хочу, чтобы отступы были внизу . «нижний контейнер» включает в себя кнопку и поле ввода. серый цвет - это верхняя часть предложенных вариантов клавиатуры (iOS)
На изображении ниже показано нежелательное поведение. вы можете увидеть нижнюю границу ввода, а также, как кнопка начинает исчезать за окном предложений / клавиатурой. Если входные данные будут расширяться, нижняя граница и кнопка постепенно станут менее заметными.
Вот компонент всего экрана:
render () {
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: Colors.PRIMARY_OFF_WHITE,
}}
behavior={Platform.OS === 'ios' ? 'position' : null}
keyboardVerticalOffset={Platform.OS === 'ios' ?hp("11%") : 0}
>
/* Upper Container */
<View style={{ justifyContent: 'flex-start', height: height*0.8, paddingBottom: 10 }}>
<FlatList
data={this.props.messages}
ref={'list'}
onContentSizeChange={() => this.refs.list.scrollToEnd()}
keyExtractor={(item) => {
return (
item.toString() +
new Date().getTime().toString() +
Math.floor(Math.random() * Math.floor(new Date().getTime())).toString()
);
}}
renderItem={({ item, index }) => {
return (
<Components.ChatMessage
isSender={item.sender == this.props.uid ? true : false}
message={item.content.data}
read={item.read}
time={item.time}
onPress={() =>
this.props.readMsg(
{
id: this.props.uid,
role: this.props.role,
convoId: this.state.ownerConvoId
},
item.docId,
this.props.navigation.state.params.uid
)}
/>
);
}}
/>
</View>
/* Lower Container */
<View
style={{
height: this.state.height+20,
flexDirection: 'row',
alignItems: 'center',
justifyContent:"space-around",
paddingVertical: 10
}}
>
<Components.OptionFan
options={[
{
icon: require('../assets/img/white-voice.png'),
onPress: () => {
this.props.navigation.navigate('Schedule', {
receiver: this.conversants.receiver,
sender: this.conversants.sender,
type: 'Voice'
});
},
key: 1
},
{
icon: require('../assets/img/white-video.png'),
onPress: () => {
this.props.navigation.navigate('Schedule', {
receiver: this.conversants.receiver,
sender: this.conversants.sender,
type: 'Video'
});
},
key: 2
}
]}
/>
<TextInput
multiline={true}
textAlignVertical={'center'}
onChangeText={(text) => this.setState({ text })}
onFocus={() => this.refs.list.scrollToEnd()}
onContentSizeChange={(event) =>
this.setState({
height:
event.nativeEvent.contentSize.height <= 40
? 40
: event.nativeEvent.contentSize.height
})}
style={{
height: Math.max(40, this.state.height),
width: wp('80%'),
borderWidth: 1,
alignSelf: this.state.height > 40 ? "flex-end":null,
borderColor: Colors.PRIMARY_GREEN,
borderRadius: 18,
paddingLeft: 15,
paddingTop: 10,
paddingRight: 15
}}
ref={'input'}
blurOnSubmit={true}
returnKeyType={'send'}
placeholder={'Write a message...'}
onSubmitEditing={() => {
if (this.props.role == 'Influencer') {
this.send();
this.refs.input.clear();
} else {
this.setState({ visible: true });
}
}}
/>
</View>
</KeyboardAvoidingView>
);
}
Как я могу go реализовать вырост, который остается в поле зрения с желаемым отступом внизу?
РЕДАКТИРОВАТЬ: чтобы было ясно, этот вопрос не о том, как сделать автоматический рост поле ввода. код выше уже выполняет это. это о контейнере, в котором находится поле ввода с автоматическим увеличением, и о том, как родительский контейнер, поле ввода и кнопка растут позади предложений клавиатуры / клавиатуры. Цель состоит в том, чтобы текстовый ввод всегда отображался прямо над клавиатурой, при этом нижняя часть поля ввода / кнопки / контейнера всегда была на том же расстоянии между клавиатурой, а высота увеличивалась вверх только.
вопрос, размещенный здесь, похож на: В React Native, как иметь несколько многострочных текстовых вводов, которые не прячутся за клавиатурой в одной прокручиваемой форме?