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

Posted 2023-04-18

【中文标题】React Native TextInput在iOS上渲染文本太高，切断了一些字符的顶部

【英文标题】：React Native TextInput rendering text too high on iOS, cutting off the tops of some characters

【发布时间】：2020-05-10 02:47:06

【问题描述】：

我的 react native 应用中有一个简单的 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 上，这正是我想要的效果：

问题在于 iOS。它使文本太高了，切断了美元符号的顶部，以及数字的几个像素。它使用占位符和当用户输入文本时这样做：

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

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

【问题讨论】：

用尽所有其他选项后，字体文件本身似乎存在问题。不确定到底是什么问题，但其他字体不会产生这个问题。 Android 没有问题，但 iOS 有。

【参考方案1】：

我认为您对 IOS 上的 height 和 lineHeight 的正常行为有一些影响。在 IOS 上，在 react native 中为 textInput 设置 lineHeight 或设置高度都适用。我建议将其中一个设置为至少与你的 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
,