React Native UI 与不同的屏幕尺寸保持一致

Question

我正在构建一个 React Native 应用程序，并且 UI 在一个屏幕尺寸上按预期工作，但在另一个屏幕尺寸上则不然。

我只使用响应式单元。

某些部分的文字和数字没有出现。我会添加照片。 会是什么？

这是一些示例代码 -

<Text style={[styles.upperText, { color: textColour}]}>Right now in {location}</Text>
      {weather && weather.current ? (
        <Text style={[styles.text, {color: textColour}]}>{Math.round(weather.current.temp_c)}°C</Text>
      ) : (
        <Text style={styles.loadingText}>Loading weather...</Text>
      )}

Answer 1

我理解您面临的问题。实际上你的问题并不满足样式部分，但是没关系。我会帮你的。

原因是，如果文本长度或文本大小增加，那么在渲染负文本时将占用下一行或超出文本组件。 解决方案是使用 adjustmentFontSizeTofit 和numbersOfline(1) 文本组件属性进行隐式处理。

或者使用可以使用 flex:1 、 flexShrink :1、textAllign:'center' 进行文本样式调试