时间戳

首页 > 解决方案 > React Native TextInput 在 iOS 上渲染文本太高，切断某些字符的顶部

ios - React Native TextInput 在 iOS 上渲染文本太高，切断某些字符的顶部

问题描述

我的反应本机应用程序中有一个简单的 TextInput。以下是相关代码：

<View style={styles.AmountWrapper}>
    <TextInput
        multiline={true}
        placeholder="$0"
        placeholderTextColor={colors.black38}
        style={styles.NumberInput}
        keyboardType={"numeric"}
    />
</View>

let styles = StyleSheet.create({
    AmountWrapper: {
        flexDirection: "column",
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: colors.white
    },
    NumberInput: {
        flexDirection: "row",
        alignItems: "center",
        flex: 0,
        fontFamily: styleHelper.fontFamily("medium"),
        fontSize: 48,
        paddingHorizontal: 16,
        paddingTop: 0,
        paddingBottom: 0,
        color: colors.blue,
        textAlign: "center",
        borderWidth: 0,
        textAlignVertical: "center"
    },
});

我正在使用 Android 9.0 和 Xcode 的模拟器模拟 iOS 12.4 iPhone X 的 Android Studio Pixel 3。

在 Android 上，这正是我想要的呈现方式：

Android 渲染正确

问题出在 iOS 上。它使文本太高了，切断了美元符号的顶部，以及数字的几个像素。它使用占位符以及当用户输入文本时执行此操作：

iOS 渲染不正确

我尝试过更改边距、填充、textAlign、lineHeight、flexDirection、alignItems 和 justifyContent。我也在multiline={false}TextInput 中尝试过。

如何让 iOS 进一步向下渲染文本并在 TextInput 中正确显示？

标签： iosreact-nativetextinput

解决方案

我认为您对 IOS 上的 height 和 lineHeight 有一些压倒一切的正常行为。在 IOS 上，在 react native 中设置 lineHeight 或设置 textInput 的高度都适用于我。我建议将其中一个设置为至少与您的 fontSize 一样大的大小，然后在您的样式中注释掉线条，以通过消除过程找出是哪一个导致它。这是一个适用于我的一个项目的样式示例：

         <TextInput style={styles.inputsTwo}
                accessible={this.state.access}
    placeholder="Email"
    clearButtonMode="always"
            onChangeText={text => this.setState({email: text})}
            value={this.state.email}
    />
    <TextInput style={styles.inputs}
                accessible={this.state.access}
    placeholder="Password"
    secureTextEntry={true}
    clearButtonMode="always"
            onChangeText={text => this.setState({password: text})}
            value={this.state.password}
    />

然后在我的风格中：

   inputs: {
     textDecorationLine: 'underline',
     marginBottom: 5,
     textAlign: 'left',
     marginLeft: 30,
     marginRight: 30,
     borderBottomColor: '#808080',
     borderBottomWidth: 2,
     height: 48,
     fontSize: 48
 },
   inputsTwo: {
    textDecorationLine: 'underline',
    marginBottom: 10,
    textAlign: 'left',
    marginLeft: 30,
    marginRight: 30,
    borderBottomColor: '#808080', 
    borderBottomWidth: 2,
    height: 48,
    fontSize: 48
},

推荐阅读