Reactive Native 在IOS中集成中的踩坑经历

什么是React Native

React-Native 是由Facebook出品的一款可以使用JavaScript来编写原生app的框架,官方说明是:A framework for building native app with React(一个使用React来编写原生app的框架),然而这个React也是由该公司出品的一款可以用来编写用户界面的JS库。二者的出现,以其强大的功能和便捷的使用方式迅速被广大开发者使用,并在各大平台的应用研发中占据了自己的一席之地。

GitHub: React-NativeReact

官网:React-Native ,React-Native中文官网 , React

搭建React-Native开发环境

1.这一步比较简单,如果不懂,可以参考网上的文章,或者ReactNative官网的相关页面。

2.安装cocoapods,这是一个包管理工具。

3.一个比较好用的文本编辑器。注意,不要使用mac自带的文本编辑器,不好用,如果要用,请把语言设置为英文,否则各种中文全半角要折腾死人。

开始集成

官网的推荐方法是新建ios目录,把我们的东西都放到ios目录里,不过我们不管它。我们可以在我们的项目目录里新建reactnaive目录。用于放置和ReactNative相关的文件和文件夹。

然后打开此文件夹。使用touch新建package.json文件。

{
“name”: “YouProjectName”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
},
“dependencies”: {
“react”: “16.0.0-alpha.12”,
“react-native”: “0.47.1”
}

这里需要注意将name换成你自己的项目名称就可以了。不建议使用最新的版本,最新的版本有不小的BUG。解决起来很费力费时。

编辑后。回到我们的目录,执行

npm install

此命令将安装所有的之后就是安装React 和React-Native模块,等待终端执行完毕后,该文件夹下会多出一个node_modules的文件夹,里面是所有React 和React-Native相关模块。

接下来是使用cocoapods,安装依赖库,在此之前,需要新建配置文件podfile,根据需要编写并输入以下内容

pod ‘React’, :path => ‘./YourReactNativeFolder/node_modules/react-native’, :subspecs => [
‘Core’,             #核心库
‘BatchedBridge’,    #RN版本高于0.45之后必须导入
‘DevSupport’,       # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
‘ART’,
‘RCTActionSheet’,
‘RCTAdSupport’,
‘RCTAnimation’,
‘RCTCameraRoll’,
‘RCTGeolocation’,
‘RCTImage’,
‘RCTNetwork’,
‘RCTPushNotification’,
‘RCTSettings’,
‘RCTText’,
‘RCTVibration’,
‘RCTWebSocket’,     # 这个模块是用于调试功能的
‘RCTLinkingIOS’
]
# 如果你的RN版本 >= 0.42.0,则加入下面这行
pod ‘Yoga’, :path => ‘./YourReactNativeFolder/node_modules/react-native/ReactCommon/yoga’

需要注意的是ReactNative目录的正确性。如果万事OK。就直接执行下面的命令。

pod install

此命令执行完毕后。编译程序,看有无报错,如果没有,则集成成功。

页面嵌入和集成

集成才是我们的最终目的,我们来实现它。首先,新建一个ios的入口文件.index.ioss.js.

此文件是必须创建的,比较简单。

‘use strict’;

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
View
} from ‘react-native’;
//{‘\n’}换行符
export default class ReactPage extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
这就是所谓的{‘\n’}
React Native
</Text>
<Text style={styles.instructions}>
模拟器中cmd+R刷新页面,cmd+D调出调试菜单
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F2F2F2’,
},
welcome: {
fontSize: 24,
textAlign: ‘center’,
margin: 10,
},
instructions: {
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
},
});

AppRegistry.registerComponent(‘YourProjectName’, () => ReactPage);

然后找到你的Object C代码。找到你要引入的事件处理程序。在对应的页面上增加React的引用。

  1. #import <React/RCTRootView.h>

然后在事件处理方法中添加如下代码:

NSURL *jsCodeLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle?platform=ios&dev=true”];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@”AiFlow” initialProperties:nil launchOptions:nil];
rootView.backgroundColor = [UIColor colorWithHexString:@”#F2F2F2″];

UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;

[self presentViewController:vc animated:YES completion:nil];

执行。点击。运行。OK。

另外,如果无法展示页面,则需要npm start启动服务端。

当然,这里只是Hello World,剩下的才是重中重。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax