首页 > 解决方案 > 字体大小在反应原生的不同设备中缩小(不响应)

问题描述

我实际上是新手,通常会做出原生反应,所以我的字体大小肯定有问题,我编写了这段代码并在 5.5 英寸的屏幕上查看,它看起来有点不错,但是当在更大的设备上运行代码时,字体收缩,这是相当重要的。

我已经尝试过react-native-responsive-fontsize,但它不起作用

下面是我的代码:

<SafeAreaView style={styles.container}>
        <View
          style={{
            flex: 0.94,
            justifyContent: 'center',
            flexDirection: 'row',
          }}>
          <TouchableOpacity
            style={{
              flex: 0.95,
              backgroundColor: 'white',
              borderRadius: 15,
              shadowColor: '#000',
              shadowOffset: {
                width: 0,
                height: 5,
              },
              shadowOpacity: 0.36,
              shadowRadius: 6.68,

              elevation: 11,
            }}>
            <View
              style={{
                flex: 0.16,
                justifyContent: 'flex-end',
              }}>
              <Text
                style={{
                  textAlign: 'center',
                  fontSize: 28,
                  fontWeight: 'bold',
                  color: '#569499',
                }}>
                Let's practice it.
              </Text>
            </View>
            <View
              style={{
                flex: 0.6,
                flexDirection: 'row',
                justifyContent: 'center',
              }}>
              <View
                style={{
                  flex: 0.95,
                  justifyContent: 'space-evenly',
                }}>
                  <View style={{flex:0.3,}}>
                    <Text style={{fontSize:16,textAlign:'center'}}>In this game, you will see letters appear one at a time on screen.</Text>

                  </View>
                <View style={{flex:0.3}}>
                  <Text
                    style={{
                      fontSize: 16,
                      color: 'black',
                      textAlign: 'center',
                    }}>
                    Tap the screen for every letter except
                    <Text
                      style={{
                        fontWeight:'bold',
                        fontSize: 16,
                        color: '#39888e',
                        textAlign: 'center',
                      }}>
                      {' '}
                      X
                    </Text>. Press as quickly and correctly as you can.
                  </Text>
                </View>
              </View>
            </View>
            <View
              style={{
                flex: 0.25,
                justifyContent: 'center',
              }}>
              <View
                style={{
                  flex: 0.45,
                  flexDirection: 'row',
                  justifyContent: 'center',
                }}>
                <View style={{flex: 0.65, justifyContent: 'center'}}>
                  <Text style={{textAlign: 'center', fontSize: 15}}>
                    Tap twice any where on the screen to start.
                  </Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

export default TwoBackInstn;
// UI Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e7f4f5',
    justifyContent: 'center',
  },
  logo: {
    width: 100,
    height: 100,
  },
});

标签: react-nativereact-native-android

解决方案


推荐阅读