关于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框架简单实现过程