在原生工程中引入React Native

作者: shaneZhang 分类: ios技术 发布时间: 2015-12-19 19:53

如何在原生的工程中引入react native呢?

在这里我们先来创建一个xcode工程,命名为ReactNativeDemo

前提是必须先要把React Native的基础环境搭建完毕,如果没有好得话可以参见我之前的博客来搭建基础环境,包括node 和cocoapods环境

cd {workspacce}
npm install react-native --save
vim Podfile
# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
]
pod install

然后在工程目录下创建index.ios.js

vim index.ios.js
'use strict';

var React = require('react-native');
var {
  Text,
  View
} = React;

var styles = React.StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});

class ReactNativeDemo extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is ReactNative Demo .</Text>
      </View>
    )
  }
}

React.AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

到这里跟官方文档教程保持一致,然后就是应用和使用了

在需要使用的地方创建一个ReactNativeView,其实React Native完全可以看做是一个UIView的子类来使用

在需要引用的地方添加以下代码

   NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
    RCTRootView *rootView = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"ReactNativeDemo" initialProperties:nil launchOptions:nil];
    [self addSubview:rootView];
    rootView.frame = self.bounds;

然后启动电脑的node服务

cd node_modules/react-native
npm start

下面可以尝试运行工程了

我在尝试的时候遇到了一个问题就是一直不成功,原因在于ios9限制了http的使用,需要强制使用http的方式,具体配置方式可以网上自行搜索添加。

我的工程demo

本页面支持繁体中文友好显示:在原生工程中引入React Native

如果觉得我的文章对您有用,请随意打赏。如果有其他问题请联系博主QQ(909491009)或者下方留言!

发表回复