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

Question

我的 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 的模擬器在 Android Studio Pixel 3 上進行模擬，模擬 iOS 12.4 iPhone X。

在 Android 上，這正是我想要的渲染方式：

問題出在 iOS 上。 它將文本渲染得太高了，切斷了美元符號的頂部，以及數字的幾個像素。 它使用占位符以及當用戶輸入文本時執行此操作：

我嘗試過更改邊距、填充、textAlign、lineHeight、flexDirection、alignItems 和 justifyContent。 我也在 TextInput 中嘗試了multiline={false} 。

如何讓 iOS 進一步向下渲染文本並在 TextInput 中正確顯示？

Answer 1

我認為您在 IOS 上有一些覆蓋高度和 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
},