React native学习第八章：嵌入到现有原生应用

最新推荐文章于 2024-01-08 09:56:18 发布

原创最新推荐文章于 2024-01-08 09:56:18 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

12 篇文章

订阅专栏

参考：http://reactnative.cn/docs/0.42/integration-with-existing-apps.html#content

文件目录：

{
	"name": "PlayGame",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"react": "~15.4.1",
		"react-native": "0.42.0"
	},
	"devDependencies": {
		"babel-jest": "19.0.0",
		"babel-preset-react-native": "1.9.1",
		"jest": "19.0.2",
		"react-test-renderer": "~15.4.1"
	},
	"jest": {
		"preset": "react-native"
	}
}

podfile:

target ‘PlayGame’ do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => ‘/Users/macmini/Desktop/PlayGame/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "Yoga", :path => “/Users/macmini/Desktop/PlayGame/node_modules/react-native/ReactCommon/yoga"

end

在运行之前，必须要在终端数据npm start

 NSURL *jsCodeLocation = [NSURL
                            URLWithString:@"http://localhost:8081/index.ios.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];

这样就能从原生界面跳转到RN界面，另：urlwithString：....如果把js文件放到公司服务器上，是否就可实现热更新。