在 React-Native 中需要静态图像

Question

我的 RN 应用程序（v0.19.0、ios 和 android）需要一个 loading/splash 屏幕（启动时偶尔会加载一些数据），所以我正在尝试了解如何在各种设备上为该屏幕提供正确的图像集。

代码是：

  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={require('../assets/splash/Default.png')} resizeMode={Image.resizeMode.cover} />
      </View>
    );
  }

据我所知，我需要提供一组具有正确像素比例的图像吗？这与各种屏幕尺寸有什么关系？另外，RN docs only mention 2x and 3x, but docs on PixelRatio表示还有1.5和3.5？（而且，文件名中是如何表示的？是 check@3.5x.png 吗？）我如何解释纵向与横向？

这些文档似乎对这个主题的描述非常简单。

Answer 1

react-native 不支持 (IIRC) 自动根据方向和大小选择图像大小。

我建议您构建一个 'SplashScreen' 组件并像往常一样使用 flexbox 对其进行布局。这样做的额外好处是让您不必提供数十张不同尺寸的图片！

在 React-Native 中需要静态图像

Requiring static images in React-Native

pixel-ratio

react-native

screen-density