TextInput - Android与iOS中的不同高度

Posted 2023-04-18

技术标签:

【中文标题】TextInput - Android与iOS中的不同高度【英文标题】：TextInput - different height in Android vs 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

【问题讨论】：

【参考方案1】：

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

【讨论】：

【参考方案2】：

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

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

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

还可以查看 React-Native InputAccessoryView

【讨论】：