TextInput - Android 与 iOS 中的不同高度

Question

我对 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.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>

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

正如您在代码中看到的，我已经尝试按照此线程paddingVertical中的建议强制执行0

Answer 1

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