Я новичок в 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
, как было предложено в этой теме
Попробуйте поиграть с behavior = {Platform.OS == "ios" ? "padding" : "height"}
Из того, что я вижу, поведение отличается на ios и android. Я предлагаю установить одинаковое поведение для обеих платформ.
Я попробовал ваш код, но стили и другие вещи отсутствуют, и мне довольно сложно его протестировать и получить точный результат.
Также загляните в React-Native InputAccessoryView
Сделайте вертикальный отступ нулевым (0) и укажите высоту для ввода. Это сделает ввод текста одинаковым на обеих платформах.