如果还没有看过React-Native初体验二请先看React-Native初体验二在回来看。
ReactNativeTest项目的下载地址:github
1.reactNativeTest项目运行的效果
2.实现启动页
导航器的实现
1.定一个Welcome.js文件
2.在Welcome.js中使用Navigator导航器
3.给Navigator导航器初始化
Welcome.js文件代码：
class Welcome extends React.Component {
/**
* 构造器初始化
* @param props
*/
constructor(props) {
super(props);
//函数的定义并初始化
this.renderScene = this.renderScene.bind(this);
this.goBack = this.goBack.bind(this);
//监听返回事件
BackAndroid.addEventListener('hardwareBackPress', this.goBack);
}
/**
* 监听手机点击返回按钮
*/
goBack() {
return NaviGoBack(_navigator);
}
/**
* 渲染场景的函数：这里接收系统传来的两个参数，一个是路由对象，一个是导航器对象
*/
renderScene(route, navigator) {
let Component = route.component;//获取到initialRoute路由中设计的Splash组件
_navigator = navigator;//导航器对象，在goBack（）函数中需要用到
return (
定时器的实现
1.定一个Splash.js文件
2.在构造器中获取导航器Navigator对象
3.设计定时，实现界面跳转
Splash.js文件代码：
/**导包*/
import React from 'react';
import {
StyleSheet,
Navigator,
StatusBar,
BackAndroid,
View,
Text,
Platform
} from 'react-native';
/**导包*/
import Splash from '../Splash';
/**导一个工具类*/
import { NaviGoBack } from '../utils/CommonUtils';
var _navigator;
import React from 'react';
import {
Dimensions,
Image,
InteractionManager,
View,
Text,
} from 'react-native';
import AppMain from './page/AppMain.js';
/**获取手机屏幕的宽和高*/
var {height, width} = Dimensions.get('window');
class Splash extends React.Component {
/***
* 构造器
* 开始了一个定时器setTimeout（），2500豪秒后跳转到AppMain.js
* @param props
*/
constructor(props) {
super(props);
//获取navigator对象，在welcome.js传过来的
const {navigator} = props;//可以
//const {navigator} =this. props;//可以
//const {navigator} = this.props.navigator;//这个是不可以的，会报错
//const {navigator} = props.navigator;//这个是不可以的，会报错
this.timer = setTimeout(() => {
InteractionManager.runAfterInteractions(() => {
navigator.resetTo({
component: AppMain,
name: 'AppMain'
});
});
}, 2500);
}
/**
* 渲染界面，只有一张图片
* @returns {XML}
*/
render() {
return (
);
}
}
export default Splash;
3.修改index.android.js文件
/**这里是导包，导入我们要使用的控件*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
/**导入一个自己写的js文件*/
import Welcome from './app/page/Welcome.js';
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('reactNativeTest', () => Welcome);
4.运行
1.来到项目根目录，打开cmd
2.执行：
react-native start
``
3.来到项目根目录，打开新的cmd
4.执行：
react-native run-android
5.效果：
3.实现首页
1.定一个AppMain.js文件
2.监听点击返回按钮
BackAndroid.addEventListener('hardwareBackPress', xxxxx);
3.实现顶部导航栏
style={{width:20,height:26,marginLeft:8}}/> style={{width:24,height:24,marginRight:8,alignItems:'center'}}/> ref={viewPager => { this.viewPager = viewPager; }} style={styles.flex1} initialPage={0} pageMargin={0}> } *style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between react-native start react-native run-android4.实现:ViewPagerAndroid
5.实现底部导航栏:
6.实现点击事件：TouchableOpacity
.....
AppMain.js文件代码：
/**
*/
var styles = {
flex1: {
flex: 1,
},
page: {
alignItems: 'center',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
//borderWidth: 1,
borderColor: 'black',
},
headerMenu: {
flexDirection: 'row',
backgroundColor: '#F2F2F2',
height: 50,
paddingHorizontal: 10,
},
footerMenu: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#F2F2F2',
height: 60,
paddingHorizontal: 40,
},
img: {
alignItems: 'center',
justifyContent: 'center',
width:90,
height:90
},
welcome: {
fontSize: 10,
textAlign: 'center',
},
line: {
backgroundColor: '#cdcdcd',
height: 1,
},
}
export default AppMain;6.运行
1.来到项目根目录，打开cmd
2.执行：
3.来到项目根目录，打开新的cmd
4.执行：
5.效果：
7.最后附上整个reactNativeTest项目的结构图
来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2244