1. props和state比较
1.1 props是在父组件中指定的，一经指定，那么在被指定的组件的生命周期中是不再改变的，一般是组件在创建的时候，使用props去做定制。
1.2 对于需要改变的数据，可以使用state，ES6中在constructor中初始化state(早期ES5的例子中会使用getInitialState做初始化)，然后在修改的地方调用setState即可。
2.ReactNative component生命周期：
component生命周期
3. ReactNative 使用flex做实现弹性宽高
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
注意：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的
width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
4.ReactNative 使用flexBox指定组件的布局
4.1一般来说使用flexDriection(定义布局排列方向，默认为纵向排列column)、justifyContent(定义主轴的排列方式:flex-start、center、flex-end、space-around以及space-between)和alignItem(定义与主轴垂直的次轴排列方式:flex-start、center、flex-end以及stretch)即可完成基本布局，更多布局字段见布局样式属性
5.ReactNative中使用到的列表控件
5.1常用的列表控件FlatList，FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。FlatList相对于ListView的优点就是会优先渲染屏幕上可见的元素，而不是一次性渲染全部元素。
5.2对于需要做分组的列表控件，可以使用SectionList，那么相对于FlatList，SectionList的data就会更加复杂了，同时还多了一个属性renderSection用于渲染区的头部试图。
6.Native项目中集成RN页面(使用cocoapods集成)
6.1新建一个native+reactnative的文件夹(以Native+ReactNativeDemoRoot为例)，在该文件夹中建子文件夹/ios，再把native工程拷贝到ios文件夹中。
6.2在Native+ReactNativeDemoRoot中创建package.json文件(也可以使用npm init创建，但是内容需要一步一步输入，而且key值可能会忘记，有模板的话直接创建最方便了，package.json中的key值可以使用npm help json去查询)，注意package.json中的react-native的版本号，这个会影响native工程中podfile需要引入的文件。
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
6.3在根目录(即包含有package.json文件的目录)中执行命令npm install来安装React和React Native模块，这些模块会被安装到根目录下的node_modules/目录中(所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传，随用随装)。
6.4进入到native工程中，执行命令pod init初始化Podfile文件，可以拷贝ReactNative中文网/集成到现有原生应用中的Podfile模板，Podfile文件完成后使用命令pod install安装React Native的pod包。
# target的名字一般与你的项目名字相同
target 'NumberTileGame' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end
注意：
1.需要根据项目路径修改path
2.需要根据package.json中的react-native版本对引入的文件做修改
6.5接下来就开始写JS的代码了，在根目录中创建index.js文件(注意在0.49版本之前是index.ios.js文件)，在文件中添加ReactNative的代码，ReactNative中使用到的模块都需要在Native的Podfile中对相应的引入哦！
index.js是React Native应用在iOS上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行require/import导入语句。本教程中为了简单示范，把全部的代码都写到了index.js里（当然实际开发中我们并不推荐这样做）。注意index.js中函数
registerComponent注册的模块，在Native工程中会用到
6.6在Native项目中添加一个事件处理，跳转到ReactNative页面，这里会使用到一个类RCTRootView，debug时使用下面的代码加载ReactNative的界面，release时URL需要改变，具体后续补充。。。
NSURL *reactNativeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
//moduleName就是在index.js中使用registerComponent注册的模块
//initialProperties用于把native界面的数据传输给ReactNative界面，ReactNative界面使用this.props即可获取
//launchOptions有待补充
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:reactNativeLocation
moduleName:@"ReactNativePage"
initialProperties:nil
launchOptions:nil];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
[self.navigationController pushViewController:rootViewController animated:YES];
6.7在根目录中执行命令npm start启动开发服务器(即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行)，最后编译运行Native项目即可。
Packager只是在开发时需要，便于你快速开发迭代。在正式发布应用时，所有的js文件都会被打包为一整个jsbundle文件离线运行，此时客户端不再需要Packager服务。
网友评论