TextInput - разная высота в Android и iOS

Я новичок в React Native, и до сих пор большая часть моего тестирования проводилась в симуляторе iOS. Сейчас исправляю мелкие недочеты во внешнем виде в эмуляторе Android. Я борюсь с одной конкретной проблемой в чат-части приложения, которую не могу решить.

У меня есть компонент TextInput, завернутый в компонент KeyboardAvoidingView, поэтому он всегда парит над клавиатурой. Предполагается, что TextInput вырастет максимум до 5 строк, как и другие чаты в других приложениях. Все это отлично работает в симуляторе iOS, но в эмуляторе Android TextInput имеет начальную высоту или отступ, которые я не могу контролировать или манипулировать.

Вот мой код — я «прописал» наиболее подходящие стили, так что вы видите, что происходит.

<View style = {mainStyles.background}>
                <SafeAreaView style = {{ flex: 1,  }} forceInset = {{ top: 'never' }}>
                    <View style = {{flexDirection: 'column', flex: 1,}}>
                        <View style = {{height: 80}}>
                            <View style = {mainStyles.safeHeader}>
                                <TouchableOpacity activeOpacity = {1.0} style = {{ width: 36, height: 36, backgroundColor: '#fff', marginTop: 8, borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} onPress = {() => this.props.navigation.pop()}>
                                    <Icon name='ios-arrow-back' size = {26} color='#2D2C31'  />
                                </TouchableOpacity>

                                <Text style = {mainStyles.screenTitle}>{this.state.title}</Text>

                                <TouchableOpacity activeOpacity = {1.0} style = {{ width: 36, height: 36, backgroundColor: '#fff',  marginTop: 8, borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} onPress = {() => console.info("asd")}>
                                    <Icon name='ios-more' size = {26} color='#2D2C31'  />
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style = {{flexDirection: 'column', flex: 1, flexDirection: 'column'}}>
                            <FlatList inverted data = {messages_data} renderItem = {this.renderItem} keyExtractor = {(item) => item.permalink} onRefresh = {() => this.onRefresh()} refreshing = {this.state.loading} />
                        </View>
                    </View>

                    <KeyboardAvoidingView behavior = {Platform.OS == "ios" ? "padding" : "height"} style = {{width: '100%', backgroundColor: 'white'}} >
                        <TouchableWithoutFeedback onPress = {Keyboard.dismiss}>
                            <View style = {{width: '100%', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'space-between', padding: 20}}>
                                <TextInput ref= {(el) => { this.new_message = el; }} onChangeText = {(new_message) => this.setState({new_message})} value = {this.state.new_message} placeholder = "Your message..." editable = {true} multiline = {true} numberOfLines = {5} style = {{fontFamily: "Nunito_SemiBold", fontSize: 16, maxHeight: 120, paddingVertical: 0, flex: 1, justifyContent:"center", backgroundColor: 'white'}} />
                                <View style = {{width: 50, flexDirection: 'column', justifyContent: 'flex-end',}}>
                                    <TouchableOpacity onPress = {() => this.createNewMessage()} activeOpacity = {1.0} style = {{ width: 36, height: 36, backgroundColor: '#fff', marginRight: 20,  borderRadius: 18, justifyContent: 'center', alignItems: 'center',}} >
                                        <Icon name='md-send' size = {26} color='#2D2C31'  />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </TouchableWithoutFeedback>
                    </KeyboardAvoidingView>
                </SafeAreaView>
                <SafeAreaView style = {{ flex: 0, backgroundColor: 'white' }} />
            </View>

Этот код дает мне следующий результат:

Как вы видите в коде, я уже пытался принудительно преобразовать paddingVertical в 0, как было предложено в этой теме

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
3
0
2 181
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте поиграть с behavior = {Platform.OS == "ios" ? "padding" : "height"}

Из того, что я вижу, поведение отличается на ios и android. Я предлагаю установить одинаковое поведение для обеих платформ.

Я попробовал ваш код, но стили и другие вещи отсутствуют, и мне довольно сложно его протестировать и получить точный результат.

Также загляните в React-Native InputAccessoryView

Ответ принят как подходящий

Сделайте вертикальный отступ нулевым (0) и укажите высоту для ввода. Это сделает ввод текста одинаковым на обеих платформах.

Другие вопросы по теме