关于react native运用的简单总结

来源：互联网发布：灯光设计软件编辑：程序博客网时间：2024/05/19 00:53

一.介绍

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

0 0