创建ReactNative的iOS项目

http://reactnative.cn/docs/integration-with-existing-apps/

1.安装好ReactNative开发环境

2.安装好CocoaPods

3.创建项目根文件夹：A

4.创建文件夹A/ios

5.创建新项目到A/ios目录下

6.根目录A下创建package.json和index.js（老版本index.ios.js）文件

7.根目录A下执行$ yarn add react-native集成

8.控制台打印可能会出现警告类似warning "[email protected]" has unmet peer dependency "[email protected]".

此时安装指定版本React $ yarn add [email protected]

8.添加CocoaPods到iOS项目中

$ pod init

9.配置Podfile文件

# target的名字一般与你的项目名字相同
target 'NumberTileGame' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 调试功能需要此模块
    'RCTAnimation', # FlatList和原生动画功能需要此模块
    # 在这里继续添加你所需要的其他RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod 'yoga', :path => '../../node_modules/react-native/ReactCommon/yoga'

  # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

10.$ pod install

11.使用本地Web服务调试

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

在项目根目录A下启动

$npm start

引用框架

#import <React/RCTRootView.h>

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                  moduleName: @"RNHighScores"
                           initialProperties:
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                               launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

12.打包js和资源文件

http://www.cocoachina.com/ios/20170511/19250.html

在根目录下创建release_ios文件夹后

执行

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

13.将生成的main.jsbundle导入到项目中

14.js路径替换为

NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];//[NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

15.未知大部分使用者Target下添加了shell命令

export NODE_BINARY=node
../../node_modules/react-native/scripts/react-native-xcode.sh

创建ReactNative的iOS项目

猜你喜欢