React Native 入门之Hello Word教程
一、简介
在过去的一年里，React Native还是很火热的，曾有人说将来native的天下要么是React Native，要么是动态插件化开发。不管怎么说都提现了React Native的火热。本文将会介绍react-native的入门级开发---hello world！
首先，React Native是什么？
React Native允许你仅仅使用JavaScript构建app应用，是和react一样的设计。有了React Native，你就无需构建移动web app、html5 app或者混合app等。基于React Native构建的app性能与native相差无几。
完全用javascript就可以构建出一个性能接近native的应用。
二、环境配置
1、安装jdk、idk这里可以自行安装。
jdk:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
sdk:https://stuff.mit.edu/afs/sipb/project/android/docs/sdk/index.html
2、安装node.js
Node.js是一个基于Chrome v8引擎的javascript运行环境，Node.js有全球最大的开源库生态系统npm。node地址：https://nodejs.org/zh-cn/
3、安装React native命令行工具
npm install -g react-native-cli 其中g表示全局安装。
4、创建项目
进入要创建的工程目录，执行 下面命令：
react-native init project 其中project是你要创建的工程名。
5、运行packager
react-native start
执行完上面命令后，可以用浏览器访问:http://localhost:8081/index.android.bundle?platform=android 看看是否成功。
6、运行
这里直接连接真机或者模拟器，执行下面命令即可：
react-native run-android
至此你就可以看到一个hello word的初始化应用了。
三、Hello word项目介绍
1、工程目录结构
上面就是自动生成的工程目录，作为入门级教程，我们关系的最多的就是index.android.js和index.ios.js这是react native应用入口。二者内容一致。
2、index.android.js内容
React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class FirstDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
AppRegistry.registerComponent('FirstDemo', () => FirstDemo);上面代码就是入口文件的内容，以后自己的组件定义也和上面差不多，具体说明如下：（1）每一个组件都会继承react提供的Component类
（2）组件的渲染是有render方法来完成的，当然react有很多生命周期方法，将在下面介绍。
（3）react native提供了很多组件，如View、Text等用于满足开发需求。更多的组件应用查询：http://facebook.github.io/react-native/docs/getting-started.html
（4）react native支持对组件进行样式修饰，具体表现代码就是StyleSheet.create部分。
（5）每个类（组件）一般都会export default，便于引用组件是import。
（6）AppRegistry.registerComponent这个只在入口文件执行一次即可，用于将react native组件与native环境相关联。
四、React生命周期
生命周期对于程序员来说一定是不陌生的，从一个普通对象（一个java对象从产生到消亡）到具体组件（如android中的activity）几乎都有这个概念，react 也不例外，同样为组件提供了生命周期的概念，了解声明周期，明确在那个阶段该做什么事情，具有很重要的意义。下面简述几个常用的：
1、componentWillMount
在完成首次渲染的时候调用，此时可以修改组件是state
2、render
这个就是上面提到的必须要有的方法，创建虚拟dom
3、componentDidMount
真正的dom被渲染后调用，此时可以获取真实dom
4、componentWillReceiveProps
组件接收到新的props时调用，此时可以更改组件props及state；
5、shouldComponentUpdate
组件是否应当渲染新的props和state，返回false表示跳过后续的生命周期方法。
6、componentWillUpdate
接收新的props或者state后，进行渲染之前调用，此时不运行更新props或state。
7、componentDidUpdate
完成渲染新的props或者state后调用
8、componentWillUnmount
类似于destroy，组件消亡之前用于资源回收。与componentDidMount对应。
五、像样点的demo
1、添加tab导航：TabNavigator（详见：https://reactnavigation.org/docs/navigators/tab）
tab导航是当前app最流行的也基本是必备的架构，这样可以充分利用屏幕大小，不同tab页展示不同内容，增加展示丰富度。react相关组件TabNavigator可以提供类似于导航的功能。我们首先搭建这样一个框架。代码如下：
import FirstTabScreen from './screens/FirstTabScreen';
import SecondTabScreen from './screens/SecondTabScreen';
const MainScreenNavigator = TabNavigator({
First: {screen: FirstTabScreen},
Second: {screen: SecondTabScreen},
},{
tabBarPosition: 'bottom',
tabBarOptions: {
indicatorStyle: {
height: 0,
},
activeTintColor: '#ff8500',
inactiveTintColor: '#999',
}
});
export default MainScreenNavigator;上面代码展示了一个导航架构的实现，由两个只是标签组成。代码说明如下：
TabNavigator接收两个入参：
TabNavigator(RouteConfigs, TabNavigatorConfig)First: {screen:FirstTabScreen}既是路由配置，route名称是First，screen对应的则是渲染页面。一个这样的配置对应于一个tab标签，这里配置了两个tab标签。
tabNavigatorConfig是对导航器的一种配置，上述代码中及配置了tabbar的位置为底部、tab激活的背景色以及未激活时的背景色。
这里为每个tab标签配置的标签页分别为FirstTabScreen和SecondTabScreen，对应于具体组件，下面会讲。
2、解决页面跳转：StackNavigator
在小节1中解决了tab框架，但是这里只能做到两个tab之间的切换（即FirstTabScreen和SecondTabScreen之间的切换），但是一个app里面有很多的页面跳转，不可能仅仅只有tab标签页，而StackNavigator就可以解决页面跳转问题。
这里，我们为FirstTabScreen和SecondTabScreen分别配置内部跳转页面FirstTabOne
和FirstTabTwo，而Tab标签页须在主页面展示，配置代码如下：
import React, {Component} from 'react'
import FirstTabOne from '../concrete/FirstTabOne';
import FirstTabTwo from '../concrete/FirstTabTwo'
import {StackNavigator} from 'react-navigation'
import MainScreenNavigator from '../base/MainScreenNavigator'
const ScreenNavigator = StackNavigator({
Home: {screen: MainScreenNavigator},
FirstTabOne: {screen: FirstTabOne},
FirstTabTwo: {screen: FirstTabTwo},
});
export default ScreenNavigator;上述代码就完成了我们的需求，说明如下：
StackNavigator的函数定义如下：
StackNavigator(RouteConfigs, StackNavigatorConfig)现在配置是配置完了，该有的页面也有了，但是此时还没有逻辑可言，也就是说还没有定义页面之间是如何跳转的。
3、跳转
按照我们2小节中的假设，我们将会为FirstTabScreen和SecondTabScreen分别配置内部跳转页面FirstTabOne和FirstTabTwo，这里我们分别为FirstTabScreen和SecondTabScreen添加跳转按钮，以FirstTabOne为例：
import React, {Component} from 'react'
import {Button, StyleSheet, View} from 'react-native'
export default class FirstTabScreen extends Component {
static navigationOptions = {title: 'first', header: null};
render() {
const {navigate} = this.props.navigation;
return(
<View style={styles.viewStyle}>
<Button style={styles.btnStyle} title={"press me!"} onPress={() => navigate('FirstTabOne', {title: '第一屏'})}/>
</View>
);
}
}
const styles = StyleSheet.create({
btnStyle: {
backgroundColor: 'green',
},
viewStyle: {
flex: 1,
justifyContent: 'center',
}
});4、丰富一下下FirstTabOne页面
在上小节中，我们成功的跳转到了FirstTabOne页面，这里来完善下FirstTabOne页面的展示，采用类似于我们移动开发中经常用到的ListView来丰富下该页面。
（1）FirstTabOne页面实现如下：
import React, {Component} from 'react'
import {ListView, View, Text, StyleSheet, TouchableHighlight} from 'react-native'
import ListViewComponent from './ListViewComponent'
export default class FirstTabOne extends Component {
static navigationOptions = ({navigation}) => ({
title: `${navigation.state.params.title}`
});
render() {
return (
<View>
<ListViewComponent/>
</View>
);
}
}这里在render中我们仅仅调用了ListViewComponent组件，显然这里对ListView做了进一步的封装。
在看ListViewComponent之前，先确认个问题，那就是上节中提到的路由跳转时传入的{title:'第一屏'}参数获取问题，由代码可知，通过
static navigationOptions = ({navigation}) => ({
title: `${navigation.state.params.title}`
});即可完成该功能。
（2）ListViewComponent实现
import React, {Component} from 'react'
import {ListView, View, Text, StyleSheet, TouchableHighlight} from 'react-native'
import ListViewItem from './ListViewItem'
export default class ListViewComponent extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource(
{
rowHasChanged: (r1, r2) => r1 != r2
}
);
this.state = {
dataSource: ds.cloneWithRows(
[
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
, 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
]
),
target: ''
};
}
render() {
return (
<View>
<ListView
dataSource={this.state.dataSource}
renderRow={
(rowData) =>
<TouchableHighlight
underlayColor={"#0f90f0"}>
<Text>{rowData}</Text>
</TouchableHighlight>
}
/>
</View>
);
}
}这里就是ListView的实现，里面展示了静态的文字列表，同时还可以为其中的item添加点击事件，这样就完成了一个像样的demo。
纯手工制作，如有雷同纯属偶然，如有错误，还望指正。
附demo git地址：https://github.com/lvliuji/RN-FirstDemo.git
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
