您的位置:首页 > Web前端 > React

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

2016-07-11 15:57 288 查看
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。这样会有莫名其妙的问题。

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


 



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息