TextInput - Android与iOS中的不同高度答案

【问题标题】：TextInput - different height in Android vs iOSTextInput - Android与iOS中的不同高度
【发布时间】：2021-03-24 14:41:10
【问题描述】：

我对 React Native 很陌生，到目前为止，我的大部分测试都是在 iOS 模拟器中进行的。现在我正在清理 Android Emulator 中外观的小问题。我无法解决应用程序聊天部分中的一个特定问题。

我有一个 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.log("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>

这段代码给了我以下结果：

正如您在代码中看到的，我已经尝试按照this thread 中的建议将paddingVertical 强制为0

【问题讨论】：

标签： react-native react-native-android react-native-textinput

【解决方案1】：

使垂直填充为零 (0) 并指定输入的高度。这将使两个平台上的文本输入一致。

【讨论】：

【解决方案2】：

试试behavior={Platform.OS == "ios" ? "padding" : "height"}

据我所知，这种行为在 ios 和 android 上有所不同。我的建议是为两个平台设置相同的行为。

我尝试了您的代码，但缺少样式和其他内容，我很难对其进行测试并获得您的确切输出。

还可以查看 React-Native InputAccessoryView

【讨论】：