React Native多屏幕尺寸UI适配异常：文字数字显示不全排查

我开发的React Native应用在某一屏幕尺寸下显示正常，但切换至其他尺寸时，出现文字、数字部分内容无法显示的问题。全程使用响应式单位进行布局，以下是相关代码示例及显示异常、正常状态的截图，请求排查问题原因：

代码示例 #

return (
  <ImageBackground source={image} style={styles.container}>
    <StatusBar barStyle="light-content" backgroundColor="transparent" translucent={true} />
    <Text numberOfLines={1} adjustsFontSizeToFit={true} allowFontScaling={false} style={[styles.upperText, { color: textColour}]}>Right now in {location}</Text>
    {weather && weather.current ? (
      <Text numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.text, {color: textColour}]}>{Math.round(weather.current.temp_c)}°C</Text>
    ) : (
      <Text style={styles.loadingText}>Loading weather...</Text>
    )}
    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.descText, {color: textColour}]} >{weatherDesc}</Text>
    <Text style={styles.feelslikeText} >Outside feels like {Math.round(feelsLike)}°C</Text>
  <ScrollView showsHorizontalScrollIndicator={false} horizontal style={[styles.scrollContainer, { backgroundColor: graphColour }]}>
    <View style={{ opacity: 1, flexDirection: 'row', alignItems: 'center' }}>
      {(hourlyData ?? []).slice(0, 24).map((hour, index) => (
        <View key={index} style={{ alignItems: 'center', marginHorizontal: responsiveWidth(3) }}>
          <Text numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.scrollText, { color: textColour }]}>{hour.time}</Text>
          <Image 
            source={{ uri: `https:${hour.icon}` }} 
            style={{ width: responsiveWidth(13), height: responsiveHeight(13), marginVertical: responsiveFontSize(1), }}
            resizeMode='contain'
          />
          <Text numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.scrollText, { color: textColour }]}>{Math.round(hour.temp_c)}°C</Text>
        </View>
      ))}
    </View>
  </ScrollView>
  <View style={{flexDirection: 'row', alignItems: 'center', flex: 1 }}>
    <View style={[styles.SquaresDay]}>
      <Text style={[{ color: textColour, fontSize: responsiveWidth(40), }]}>Sunrise: {sunrise}</Text>
      <Text style={[{ color: textColour, fontSize: responsiveWidth(40), }]}>Sunset: {sunset}</Text>
    </View>
    <View style={[styles.SquaresDay]}>
      <Text style={[{ fontSize: responsiveWidth(40) }, {color: textColour}]}>Humidity:</Text>
      <Text style={[{ fontSize: responsiveWidth(40) }, {color: textColour}]}>{humidity}%</Text>
    </View>
  </View>
  </ImageBackground>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  loadingText: {
    color: 'white',
    fontSize: responsiveFontSize(2),
  },
  upperText: {
    fontSize: responsiveFontSize(2.8),
    marginTop: responsiveHeight(3),
  },
  text: {
    fontSize: responsiveFontSize(7),
  },
  descText: {
    fontSize: responsiveFontSize(3.5),
  },
  scrollContainer: {
    marginTop: responsiveHeight(8),
    height: responsiveHeight(0,1),
    width: responsiveWidth(92),
    borderRadius: responsiveWidth(4),
  },
  scrollText: {
    fontSize: responsiveFontSize(2.4),
  },
  SquaresDay: {
    width: responsiveWidth(40),
    height: responsiveWidth(40),
    margin: responsiveWidth(5),
    justifyContent: 'center',
    alignItems: 'center',
    padding: responsiveWidth(3),
    borderRadius: responsiveWidth(4),
    backgroundColor: '#3897c066',
  },
});

export default App;

显示截图 #

核心问题排查与修复方案 #

1. 字体尺寸设置极端异常 #

SquaresDay容器内的文本使用了fontSize: responsiveWidth(40)，意味着字体大小为屏幕宽度的40%，远大于容器自身宽度（屏幕宽度的40%），直接导致文字超出容器范围被截断。

• 修复：将该字体尺寸改为合理的响应式值，比如responsiveFontSize(3)或responsiveWidth(4)，根据实际显示效果调整。

2. 滚动容器高度参数错误 #

scrollContainer的height: responsiveHeight(0,1)使用了逗号代替小数点，属于语法错误，导致容器高度异常，内部内容被挤压无法显示。

• 修复：改为正确的数值，比如responsiveHeight(15)，确保滚动区域有足够高度容纳内容。

3. 部分文本未做适配处理 #

feelslikeText组件既未使用响应式字体，也未添加numberOfLines、adjustsFontSizeToFit等适配属性，在不同屏幕下易出现显示不全。

• 修复：添加适配属性与响应式字体：

  <Text numberOfLines={1} adjustsFontSizeToFit={true} style={[styles.feelslikeText, {color: textColour}]}>Outside feels like {Math.round(feelsLike)}°C</Text>
  

  并在样式中补充：

  feelslikeText: {
    fontSize: responsiveFontSize(2.5),
    marginTop: responsiveHeight(2),
  }
  

4. 响应式工具函数验证 #

确认responsiveWidth、responsiveHeight、responsiveFontSize的实现逻辑，确保是基于屏幕宽高的合理百分比计算，避免出现极端数值导致布局崩溃。

内容的提问来源于stack exchange，提问作者Omer Giladi