Ios 在XCode 11.5升级后未显示React本机映像

Ios 在XCode 11.5升级后未显示React本机映像,ios,xcode,image,react-native,build,Ios,Xcode,Image,React Native,Build,我通常显示如下图像: <Image source={require('../../assets/images/color/stuff.png')} /> <Image source={require('../some-other-path/picture.png')} /> 自从升级到XCode之后,每当我进行发布构建时,我的图像就不再出现。在dev build中,映像是可见的 我尝试了--assets dest./some文件夹,但结果相同 什么可能导致这种变化?解决

我通常显示如下图像:

<Image source={require('../../assets/images/color/stuff.png')} />
<Image source={require('../some-other-path/picture.png')} />
自从升级到XCode之后,每当我进行发布构建时,我的图像就不再出现。在dev build中,映像是可见的

我尝试了
--assets dest./some文件夹
,但结果相同

什么可能导致这种变化?

解决方案1: 在我的例子中,我使用resizeMode='center',当我从'center'改为'contain'时,它解决了我的问题

解决方案2:
  • 导航到项目目录=>
    ios
    =>创建文件夹
    assets
  • 在文件夹内
    资产
    =>创建与文件夹相同的文件夹结构,其中 您在项目中保留图像(在我的情况下,我将所有图像保留在项目中)
    app>src>assets>image
    )并将所有图像复制到此文件夹
  • 打开Xcode=>选择项目目标=>
    构建阶段
  • 将我们创建的文件夹
    资产
    拖动到
    复制捆绑资源
  • 如果需要,选择
    复制项目,然后按Finish
  • 重新清理项目并构建发布
  • 完成

    PS:如果您的图像名称如下
    my_image.ios.jpg
    ,则需要将其重命名为
    my_image.jpg

    解决方案3: 在构建阶段>捆绑反应本机代码和图像中替换为此所用的任何行:

    export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh
    
    之后,从xcode和文件夹中删除main.jsbundle文件并重新制作:

    react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
    

    之后,再次添加生成的main.jsbundle。清理、构建并再次运行项目。

    我在代码中处理的方式是在
    src
    目录下为不同格式创建一个单独的模块,作为
    @types

    因此,下面这两个文件将位于
    src/types

    png.d.ts

    declare module '*.png' {
      const __pngImage__: unique symbol;
      const image: number & { __ext__: typeof __pngImage__ };
      export default image;
    }
    
    declare module '*.jpg' {
      const __jpgImage__: unique symbol;
      const image: number & { __ext__: typeof __jpgImage__ };
      export default image;
    }
    
    jpg也是如此

    jpg.d.ts

    declare module '*.png' {
      const __pngImage__: unique symbol;
      const image: number & { __ext__: typeof __pngImage__ };
      export default image;
    }
    
    declare module '*.jpg' {
      const __jpgImage__: unique symbol;
      const image: number & { __ext__: typeof __jpgImage__ };
      export default image;
    }
    
    然后在组件中正常导入

    import my_image from 'assets/images/my_image.png';
    
    然后像下面那样使用它

    <View>
        <Image src = {my_image} />
    </View>
    

    请添加有问题的本地信息