博客> ios原生项目集成react-native过程记录
ios原生项目集成react-native过程记录
2017-09-24 04:35 评论:0 阅读:587 616227369
ios 设备唯一标识符

开发环境准备

首先按照开发环境搭建教程来安装React Native在iOS平台上所需的一切依赖软件(比如npm)。 一.创建工程 我这里用的是React Native官网上的示例代码,是一个2048类型的游戏。下面是这个游戏还没有集成React Native时的主界面:  1.png

二.添加package.json文件 在NumberTileGame目录下创建一个package.json或者直接从别的react-native项目中复制过来。  2.png

{
 "name": "NumberTileGame",
 "version": "0.0.1",
 "private": true,
 "scripts": {
  "start": "node node_modules/react-native/local-cli/cli.js start",
  "test": "jest"
 },
 "dependencies": {
  "babel-preset-react-native": "2.1.0",
  "react": "16.0.0-alpha.12",
  "react-native": "0.47.1"
 },
 "devDependencies": {
  "babel-jest": "20.0.3",
  "jest": "20.0.4",
  "react-test-renderer": "16.0.0-alpha.12"
 },
 "jest": {
  "preset": "react-native"
 }
}

我就是直接从别的react-native项目中复制过来,哈哈方便一些.

三.安装react-native模块 在终端cd到项目目录,然后执行npm install。  3.png 四.导入react-native框架 1.创建一个新的文件夹,命名为Librarys,到时候要把rn的项目拉进文件夹中。  4.png  5.png

2.把rn的项目拉进文件夹中 这里要拉的比较多也比较杂,先拉React.xcodeproj文件。(路径如图)  6.png  7.png 然后是node_modules/react-native/Libraries下的文件  8.png 一共要添加的文件一共是(当然也许还需要其他的,自己自行添加)  9.png

3.Link Binary With Libraries中添加.a库,具体的设置路径:target -> Build Phases -> Link Binary With Libraries  10.png

4.在Edit Scheme的Build中添加React

向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。  11.png

五、最后的配置 Build Settings的Other Linker Flags设置为 -ObjC Header Search Paths设置为$(SRCROOT)/node_modules/react-native/React路径,并设置为 recursive。  12.png 六、创建index.ios.js文件

创建index.ios.js文件,到时候,rn代码要写在这里。当然,放在node_modules同一个目录下就可以。  13.png

七、 添加App Transport Security例外

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true>
        </dict>
    </dict>
</dict>

 14.png

八、添加代码 1.添加一个按钮,并添加点击事件

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                           moduleName        : @"MyReactNativeApp"
                           initialProperties :
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                           launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

 15.png 2.添加头文件

import

 16.png

3.添加你自己的React Native代码

在index.ios.js中添加你自己的组件。这里我们只是简单的添加一个组件,然后用一个带有样式的组件把它包起来

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View xss=removed>
        <Text xss=removed>
          2048 High Scores!
        </Text>
        <Text xss=removed>    
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);
MyReactNativeApp是整体js模块(即你所有的js代码)的名称。你在iOS原生代码中添加React Native视图时会用到这个名称。

最后运行程序就行了command+r

效果图如下(大功告成):  17.png  18.png

最后的deom的地址: GitHub

收藏
0
sina weixin mail 回到顶部