javascript - 如何在 react-native 的低高度 TextInput 中正确使用大字体？

Question

抱歉这个愚蠢的问题。但我是 react-native 新手，不知道如何解决我的问题。

问题是如何使 TextInput 的文本看起来正常？

这是我的代码：

return (
    <Fragment>
      <SafeAreaView style={myStyles.fullCenter}>
        <Text style={myStyles.startPageText}>
          Please enter your mobile number
        </Text>
        <TextInput keyboardType="numeric" style={myStyles.enterMobileNumber} />
      </SafeAreaView>
    </Fragment>
  );
};


//STYLE : 
enterMobileNumber: {
    fontFamily: defaultFontFamily,
    fontSize: mobileNumberFontSize,
    borderColor: '#00a7ff',
    borderWidth: 4,
    borderRadius: 60,
    width: 410,
    height: 80,
    paddingHorizontal: 30,
    textAlign: 'center',
    textAlignVertical: 'center',
    lineHeight: mobileNumberFontSize,
  }

任何帮助表示赞赏

标签： javascriptreact-native

Answer 1

试试这个：这将解决问题。

return (
        <Fragment>
          <SafeAreaView style={myStyles.fullCenter}>
            <Text style={myStyles.startPageText}>
              Please enter your mobile number
            </Text>
            <TextInput keyboardType="numeric" style={myStyles.enterMobileNumber} />
          </SafeAreaView>
        </Fragment>
      );
    };


    //STYLE : 
    enterMobileNumber: {
        fontFamily: defaultFontFamily,
        fontSize: mobileNumberFontSize,
        borderColor: '#00a7ff',
        borderWidth: 4,
        borderRadius: 60,
        width: 410,
        height: 80,
jsutifyContent : 'center',
alignContent : 'center',
        textAlign: 'center',
        textAlignVertical: 'center',
        //lineHeight: mobileNumberFontSize, line height also might cause the issue.
      }