《react native总结》

                                                《react native总结》
    关于react native运用的简单总结

一.介绍
react-native是fackbook推出的第三方开源框架，主要是通过js编写原生应用，目前只开放了ios版本，android在2105年10月份推出
二.react-native框架的环境搭建
1.安装homebrew
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2.安装nodejs
brew install node
3.安装watchman
brew install watchman
4.安装flow
brew install flow
5.安装react-native自己本身
npm install -g react-native-cli
6.建立项目
react-native init myAPP
如果建立项目成功，终端会弹出如下图的效果图

三.简单的项目总结
1.首先是在appdelegate类加载如下代码
jsCodeLocation = [NSURL URLWithString:@“http://localhost:8081/index.ios.bundle”];
2.配置创建js类的名称
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@“PropertyFinderApp”
launchOptions:launchOptions];

3.接下来分析index.ios.js的实现过程
主要分为六个个步骤
（1）配置条件
· ‘use strict’;
（2）加载react-native
· var React = require(‘react-native’);这句话主要是加载reactnative框架编写好了的控件，require是调用js的方法，调用编写的js如：var SearchPage = require(’./SearchPage’);
（3）加载控件样式
var {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicatorIOS,
Image,
Component
} = React;

（4）创建css样式
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: ‘center’,
color: ‘#656565’
},
container: {
padding: 30,
marginTop: 65,
alignItems: ‘center’
},
flowRight: {
flexDirection: ‘row’,
alignItems: ‘center’,
alignSelf: ‘stretch’
},
buttonText: {
fontSize: 18,
color: ‘white’,
alignSelf: ‘center’
},
button: {
height: 36,
flex: 1,
flexDirection: ‘row’,
backgroundColor: ‘#48BBEC’,
borderColor: ‘#48BBEC’,
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: ‘stretch’,
justifyContent: ‘center’
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: ‘#48BBEC’,
borderRadius: 8,
color: ‘#48BBEC’
},
image: {
width: 217,
height: 138
}
});

（5）创建js实现的类
class myApp extends React.Component {
render() {
return (
<React.NavigatorIOS
style={styles.container}
initialRoute={{
title: ‘Property Finder’,
component: SearchPage,
}}/>
);
}
}

（6）想容器里注册我们创建的js类
React.AppRegistry.registerComponent(‘myApp’,
function() { return myApp });

上面就是总结的react-native框架简单实现过程