初探React Native

用React Native 创建全新的iOS项目还是有点激进,而且创建过程也比较简单,就不再重复了。这里主要记录让一些老项目支持React Native的方法。

主要参考官方提供的文档:http://facebook.github.io/react-native/docs/embedded-app-ios.html#content

 

1、安装Cocoapods,这个出门左拐自行Google。

2、安装Node.js ,同上

3、完成上述步骤后,终端里cd到项目根目录,输入下面命令:

npm install react-native

4、上述命令没出错的话,会在根目录下创建一个叫node_modules的文件夹。

5、在podfile里添加如下内容:

# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # Add any other subspecs you want to use in your project
]

6、终端项目根目录里执行:

pod install

7、添加js文件

$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js

8、复制如下内容到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 SimpleApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is a simple application.</Text>
      </View>
    )
  }
}

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

9、然后添加一个RCTRootView到你的项目里

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// To generate that file, run the curl command and add the output to your main Xcode build target:
//
//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                             initialProperties:nil
                                                 launchOptions:nil];

10、启动测试服务器,项目根目录终端里执行

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

11、不出意外的,运行你的项目,就可以看到RCTRootView里的内容了

 

ps:swift中可能会报错,提示找不到RCTRootView, 在Buiding Phases中添加libReact.a

安装指定版本的React Native

npm install --save react-native@0.24