react-native - TextInput - Android 和 iOS 中的不同高度

Question

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

我有一个包裹在 KeyboardAvoidingView 组件中的 TextInput 组件，所以它总是浮在键盘上方。 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

Answer 1

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