ReactNative - 打离线包

配置RN的开发环境

搭建开发环境

初始化项目

// 初始化项目
react-native init RNBundleDemo

// 运行
react-native run-ios

打包

• 在ios目录下创建bundle文件，将打包的文件放在bundle中
• 在android目录下创建bundle文件，将打包的文件放在bundle中
• 项目中引入image

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Image source={require('./src/images/jj.png')} style={{height:110,width:193}}/>
      </View>
    );
  }
}

bundle配置命令

通过 react-native bundle -h 查看bundle 命令

react-native bundle [参数]
  构建 js 离线包 

  Options:
  --entry-file <path>                Path to the root JS file, either absolute or relative to JS root
  --platform [string]                Either "ios" or "android" (default: "ios")
  --transformer [string]             Specify a custom transformer to be used
  --dev [boolean]                    If false, warnings are disabled and the bundle is minified (default: true)
  --minify [boolean]                 Allows overriding whether bundle is minified. This defaults to false if dev is true, and true if dev is false. Disabling minification can be useful for speeding up production builds for testing purposes.
  --bundle-output <string>           File name where to store the resulting bundle, ex. /tmp/groups.bundle
  --bundle-encoding [string]         Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). (default: "utf8")
  --max-workers [number]             Specifies the maximum number of workers the worker-pool will spawn for transforming files. This defaults to the number of the cores available on your machine.
  --sourcemap-output [string]        File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
  --sourcemap-sources-root [string]  Path to make sourcemap's sources entries relative to, ex. /root/dir
  --sourcemap-use-absolute-path      Report SourceMapURL using its full path
  --assets-dest [string]             Directory name where to store assets referenced in the bundle
  --reset-cache                      Removes cached files
  --read-global-cache                Try to fetch transformed JS code from the global cache, if configured.
  --config [string]                  Path to the CLI configuration file
  --projectRoot [string]             Path to the root of the project
  --reactNativePath [string]         Path to React Native

react-native bundle [参数]
  构建 js 离线包 

  Options:

    -h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
    --transformer [string]       Specify a custom transformer to be used
    --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
    --prepack                    当通过时, 打包输出将使用Prepack格式化
    --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
    --bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
    --bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
    --sourcemap-output [string]  生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map
    --assets-dest [string]       打包时图片资源的存储路径
    --verbose                    显示打包过程
    --reset-cache                移除缓存文件
    --config [string]            命令行的配置文件路径

配置IOS 和 Android 打包命令和package.json 文件

// 生成IOS打包命令
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle

// 生成android 打包命令
react-native bundle --entry-file index.js --bundle-output ./android/bundle/index.android.jsbundle --platform android --assets-dest ./android/bundle --dev false

or

// package.json 文件 npm的命令
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle",
    "budle-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --bundle-output ./android/bundle/index.android.jsbundle --platform android --assets-dest ./android/bundle --dev false",
    "test": "jest"
  },

打包效果

ios 和 android 打包效果图

注意事项

图片资源没有被使用的时候，打包的时候是不会生成image相关的打包文件。

在Xcode中集成

离线包生成完成之后，可以在ios目录下看到一个bundle目录，这个目录就是bundle生成的离线资源。
需要在Xcode中添加资源到项目中，必须使用Create folder references的方式添加文件夹.

Add Files to "RNBundleDemo"

Create folder reference 导入后的文件目录

配置AppDelegate.m文件

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  
  NSURL *jsCodeLocation;
//#ifdef DEBUG
//  //开发包
//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
//#else
//  //离线包
//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
//#endif
  
  
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
#endif
  
  
//#if DEBUG
//  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//#else
//  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//#endif
}

修改debug状态

将项目由debug状态改成release状态，Xcode-->Product-->Scheme-->Edit Scheme...

选择Generic iOS Device ,修改Version和Build号, clean一下项目，然后编译。Archice,生成.ipa文件，导入手机测试。