ios 原生应用和React native 结合开发1.环境搭建

来源：互联网发布：魔法卡片收藏家软件编辑：程序博客网时间：2024/05/17 07:17

1.环境搭建。参考教程：http://www.tuicool.com/articles/V3U3UbU 常见的环境问题可以参考此网站http://www.jianshu.com/p/fa0c19a31656

按照教程我们初始化了helloworld项目。路径为/usr/local/Cellar/nvm/0.29.0/HelloWorld 但是大家会发现使用react-native init AwesomeProject创建 react native很慢这个解决方式如下：编辑 ~/.npmrc 加入下面内容registry =https://registry.npm.taobao.org 重启下命令行.

可以直接用－更改镜像文件。

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
步骤如下：
1.sudo npm install -g react-tools 安装react-tools
2.sudo npm install -g react-native-cli
3.react-native init HelloWorld

这样就在这个目录下创建了helloWorld的项目了。（我的路径为:/usr/local/Cellar/nvm/）可以就在此目录下面开发。也可集成原生项目！将此目录的node_modules的文件夹拷贝到自己的原生项目下面。如下

2.可以看到这个目录：

这个node_modules目录将其拷贝到自己项目的根目录。

3.打开Podfile 文件输入

#react native
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]

4 pod install 安装

5.按照如图所示的建代码，

会一点iOS开发的人应该看的懂就不细说怎么创建了。

js的代码如下

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class HelloWorld extends Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.ios.js        </Text>        <Text style={styles.instructions}>          Press Cmd+R to reload,{'\n'}          Cmd+D or shake for dev menu        </Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

在ReactNative1VC里面添加代码

#import "ReactNative1VC.h"#import "RCTRootView.h"@interface ReactNative1VC ()@end@implementation ReactNative1VC- (void)viewDidLoad{    [super viewDidLoad];    NSURL *jsCodeLocation;        [[RCTBundleURLProvider sharedSettings] setDefaults];    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                        moduleName:@"HelloWorld"                                                 initialProperties:nil                                                     launchOptions:nil];        rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];    rootView.frame=[UIScreen mainScreen].bounds;    [self.view addSubview:rootView];    }- (void)didReceiveMemoryWarning{    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

运行之后出现如下图：

因为是热更新，所以代码在服务器上面。现在我们拿本地来作为服务器：

进入目录cd Pods/React; npm run start 开启node.js服务器

如果报如下错误：

表示路径有问题。

最后我们可以看到如图

OK 一切大功告成了。新的旅程即将开始哦！！！

如果我已经存在了iOS的原生应用，只是部分需要react native的开发工作，那么先用上述方法创建hello 项目，再把原生的直接add 进去然后改一下相关setting项这样比在原生项目里面是比较合理的做法。不要用pod 引入第三方react native。这样会有莫名其妙的问题。

好如下：报的错误百度都是可以搜到的

0 0