参考RN中文官网
集成React Native
一般来讲在命令行中直接输入react-native init 项目名称后，会自动新建相应的js文件。
若是已有项目需要新增RN界面等，需要以下步骤：
1.1 package.json
在项目根目录[1]下创建并编写package.json文件,然后终端运行npm install即可。
//package.json文件的书写示例
{
"name": "项目名称",
"version": "0.0.1",//版本号
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",//react版本
"react-native": "0.39.2"http://RN版本
}
}
1.2 Podfile
使用cocoapods安装依赖库。
可用依赖库可以在node_modules/react-native/React.podspec中查看。
//Podfile文件的书写示例
# target的名字一般与你的项目名字相同
target '项目的target' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的?？? ]
end
1.3 index.ios.js
在根目录下创建index.ios.js文件，并书写自己的React Native代码，这里暂不说明，之后会详细介绍
1.4 原生代码
RCTRootView导入
//RCTRootView初始化示例
//注意这里只是生成了一个UIView类，而非UIViewController类
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:launchOptions];
1.5 Packager
运行Packager
在项目根目录下，终端输入npm start
1.6 start
运行程序
index.ios.js基本书写方式
2.1 index.ios.js
//index.ios.js书写示例
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
//这里添加你需要的组件
} from 'react-native';
//此处类名至少有一个应与最后注册时一致，以做入口
class HelloWorld extends Component {
render() {
return (
//此处为最终该对象获得的视图，只能获得单视图，多视图使用如下示例进行嵌套返回
<View>
<Text>Hello world!</Text>
<Text>Good Morning</Text>
<Text>中文也是可以的</Text>
<Text>balabalabala</Text>
</View>
);
}
}
// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorld);
2.2 JSX知识
请注意下列代码中{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
style本身一个整体，定义内容样式，若是单独的直接定义样式，则需要两层{},若是使用StyleSheet方式，则只用一层{}.
flexDirection布局主轴方向:竖直轴(默认)column,水平轴row,column-reverse,row-reverse
justifyContent布局主轴对齐方式：center,flex-end,flex-start,space-around,space-between
alignItems布局次轴对齐方式：auto,center,flex-end,flex-start,stretch[2]
未完待续
