RN 植入原生后打包 bundle 文件,无法显示图片。(已解决)



  • iOS 平台(RN 0.14.2 和 0.17.0 均已测试)
    在纯 RN 项目中打包 bundle 文件,可以正常显示图片。将这个 bundle 文件放在含有 RN 的 iOS 项目中无法加载。

    在植入的工程中,打包 bundle 文件后,文字能正常显示,图片不能显示。打包的命令是:

    • RN 0.14.2 (JS_DIR=pwd/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

    • RN 0.17.0 (JS_DIR=pwd/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

    求解啊,否则在原生应用中植入 RN,最终也是无法发布项目。

    努力在行动中才能最好的体现

    0


  • 解决办法:
    引用图片要这样写:
    <Image source={require('image!kjll')} style={styles.image}/>
    而不能这样写:
    <Image source={require('./kjll.png')} style={styles.image}/>

    努力在行动中才能最好的体现

    0


  • 在0.13版本以前:

    必须在工程内植入图片。

    用source={require('image!图片名')}来引用图片。

    在0.14版本以后:

    A. 可以在工程内植入图片(不推荐)

    用source={{uri:'图片名'}}来引入图片。 require('image!')可能随时被废弃。

    B. 可以通过相对路径引入图片(推荐)

    不必在工程内添加,直接通过相对路径引用require('./图片名'),你需要确保相对这个代码文件的这个路径能找到这个图片。



  • @tdzl2003 好的,非常感谢你的解答。刚才测试了推荐的 B 选项(混合开发 iOS 平台),require('./图片名')此处应该是 require('./图片名.png') 才会将图片显示出来。然而打包好了 bundle 文件后依然无法显示图片。。。求解啊。

    我的 JSX 代码如下:

    class SimpleApp extends React.Component {
      render() {
        return (
            <View style={styles.me_about_logo_container}>
                <Image source={require('./kjll.png')} style={styles.image}/>
                <Text style={styles.company_name_text_container}>
                    chenyu1520
                </Text>
                <Text style={styles.company_name_text_version}>
                    当前版本号1.0.0
                </Text>
                <Text style={styles.company_name_text_email}>
                    商务合作: chenyu1520@gmail.com
                </Text>
                <Text style={styles.company_copyright_text_container}>
                    版权所有 ©2015 chenyu1520保留所有
                </Text>
            </View>
          );
      }
    }
    

    终端下打包 bundle 文件的命令如下:

    curl http://localhost:8081/index.ios.bundle\?platform\=ios\&dev\=true -o main.jsbundle
    

    Xcode 中的代码如下:

    NSURL *jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"main" withExtension:@"jsbundle"];
            
        RCTRootView *rootView = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"RNAndiOS" initialProperties:nil launchOptions:nil];
    

    通过 localhost 直接访问的效果如下:
    0_1457845349879_3C454657-F708-449A-80DC-1C6349D08794.png

    通过打包的 bundle 文件访问如下:
    0_1457845943269_6326908F-F9E4-48A9-8155-6B75774CA8A6.png

    努力在行动中才能最好的体现

    0


  • 你看的教程都太老了…… curl打包法也过时了好几个月了。

    现在新创建的工程,理论上设置为release以后都可以自动打包,参见文档:在设备上运行 # 使用离线包





  • @码出我天地 好的,谢谢。

    努力在行动中才能最好的体现

    0


  • @码出我天地 我按照你给的解决办法,依然无法显示。操作流程如下(在 locolhost 下是可以正常显示):

    0_1458013343376_20078FFD-458C-4E12-B2D2-2B9C86E5C74C.png

    0_1458013386004_2C3CA2A2-3BE7-4419-ACEC-C95213AF4238.png

    0_1458013532509_33650AB4-28EB-469C-B12D-F6C14821EA77.png

    努力在行动中才能最好的体现

    0


  • @码出我天地 @tdzl2003 已经解决。按照 @码出我天地 给出的解决方案,我在程序中加入那两个文件夹后,又将 main.jsbundle 文件拖拽了出来,我怀疑是 Xcode 没有引用到那个文件。
    0_1458020115909_7CDE94F0-DBBA-4F4A-8684-7E197632E176.png

    努力在行动中才能最好的体现

    0


  • @chenyu1520 这应该是一个RN相对路径的问题,貌似这样就行了,jsbundle实际临近asset目录就OK了
    要注意xcode中黄色文件夹与蓝色文件夹的区别哦

    工程目录
    +mainBundle
    ----mian.jsbundle
    ----asset目录(folder形式)

    所以热更新的时候jsbundle存放到沙盒也会出现打不开本地图片的问题哦,可以参考\使用CodePush的热更新方案


登录后回复