Блог

у меня есть компонент about, который просто отображает два текстовых компонента, это код:

  class about extends Component {
    
    render() {
   
        return (
        <>
            <View style = {this.styles.container}>
                <Text style = {this.styles.text}>Hi</Text>
                <Text style = {this.styles.text}>A very simple notebloc.</Text>
            </View>
        </>
        );
    }

    styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: "center",
            marginTop: - Math.round(Dimensions.get("window").height * 0.5) / 2,
            flexDirection: "column"
        },
        text: {
            fontSize: 25,
            fontFamily: "serif",
            textAlign: "center",
            color: "#1E90FF",
        }
    })
}
  

очень просто, проблема сейчас в том, что я хочу их FontSize: 25 использовать, но когда я попробую это на реальных устройствах, в некоторых из них второй текст разделен, я опубликую некоторый экран, чтобы вы могли увидеть проблему:

я хочу, чтобы это работало на всех устройствах:

но на некоторых устройствах я получаю это:

как я могу это решить? Я установил значение fontSize 24, и я думаю, что оно будет работать на всех устройствах, но когда оно в 25, это не так, что-то добавить, первое изображение — это устройство, которое width больше второго, поэтому я думаю width , что проблема не в этом

Чтобы решить эту проблему, попробуйте использовать react-native-size-matters для масштабирования размера шрифта независимо от плотности пикселей устройства.

Например

 fontSize: moderateScale(24, 0.3)