React Native嵌入原生应用及报错

跟着React native中文网上面《嵌入到现有原生应用》这篇文章,按步骤执行。大致步骤如下。

1.在项目的根目录下创建package.json文件。

React Native嵌入原生应用及报错_第1张图片

React Native嵌入原生应用及报错_第2张图片

文件中填入以下内容。

{"name":"NumberTileGame","version":"0.0.1","private":true,"scripts": {"start":"node node_modules/react-native/local-cli/cli.js start"},"dependencies": {"react":"15.4.1","react-native":"0.39.2"}}

在包含有package.json文件的目录(一般也就是项目根目录)中运行npm install命令来安装。

2.在.xcodeproj`文件所在的目录创建podfile文件,执行pod init命令,打开podfile文件,并写入下面的文件内容。

React Native嵌入原生应用及报错_第3张图片

React Native嵌入原生应用及报错_第4张图片

在此目录下执行pod install命令报错如下。

[!] Unable to satisfy the following requirements:

- `React/Core (from `../node_modules/react-native`)` required by `Podfile`

Specs satisfying the `React/Core (from `../node_modules/react-native`)` dependency were found, but they required a higher minimum deployment target.

React Native嵌入原生应用及报错_第5张图片

解决办法是将NumberTileGame的Deployment target从7.0改为8.0即可。

之后pod install能成功。

3.在项目根目录下创建index.ios.js文件,写入想要添加的组件。

React Native嵌入原生应用及报错_第6张图片

React Native嵌入原生应用及报错_第7张图片

4.在根控制器中创建按钮点击事件进入RN页。

- (IBAction)highScoreButtonPressed:(UIButton*)sender {

NSLog(@"High Score Button Pressed");

NSURL*jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocationmoduleName:@"RNHighScores"initialProperties:@{@"scores":@[@{@"name":@"Alex",@"value":@"42"},@{@"name":@"Joel",@"value":@"10"}]}launchOptions:nil];

UIViewController*vc = [[UIViewControlleralloc]init];

vc.view= rootView;

[selfpresentViewController:vcanimated:YEScompletion:nil];

}
React Native嵌入原生应用及报错_第8张图片

5.让工程能访问http请求。

在node_modules目录下运行npm start,此时运行Xcode。编译报错。

ld: library not found for -lReact

后来百度得到解决办法,关闭Xcode,重新pod install即可。

关于ld: library not found for -lXXXXX 的解决方法,此篇文章提供三种方法。ld: library not found for -lXXXXX 的解决方法。

你可能感兴趣的:(React Native嵌入原生应用及报错)