如果还没有看过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 (
<Component navigator={navigator} route={route} />//返回一个渲染界面的Splash组件，并传递两个参数
);
}
/**
* 界面跳转的动画：这里接收系统传来的两个参数，一个是路由对象，一个是导航器对象
*/
configureScene(route, routeStack) {
return Navigator.SceneConfigs.PushFromRight;
}
/**
* initialRouter: 路由初始化配置信息，就是说页面加载时，第一次需要展现什么内容
*configureScene: 场景转换动画配置。在RN看来，从一个页面切换到另外一个页面，就是从一个场景切换到另外一个场景，这里配置的是场景动画信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出
*renderScene: 渲染场景，读取initialRouter传来的数据，确定显示那些内容。
* */
render() {
return (
<Navigator
ref='navigator'
style={styles.navigator}
configureScene={this.configureScene}
renderScene={this.renderScene}
initialRoute={{
component: Splash,
name: 'Splash'
}}
/>
);
}
}
/**
* 弹性（Flex）宽高:
*
* 使用flex:1来指定某个组件扩张以撑满所有剩余的空间
*如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。
* 如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大
*
* 注意：
* 组件能够撑满剩余空间的前提是其父容器的尺寸不为零。
* */
let styles = StyleSheet.create({
navigator: {
flex: 1
}
});
export default Welcome;
定时器的实现
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 (
<View style={{flex:1}}>
<Image
style={{flex:1,width:width,height:height}}
source={require('./image/ic_welcome.png')}
/>
</View>
);
}
}
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.实现顶部导航栏
<View style={styles.headerMenu}>
<View style={{flex:1,justifyContent:'center'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
<View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}>
<Image source={require('../image/hotel_ic_home.png')}
style={{width:20,height:26,marginLeft:8}}/>
</View>
</TouchableOpacity>
</View>
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize: 20, textAlign: 'center'}} >首页 </Text>
</View>
<View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}>
<Image source={require('../image/ic_action_search.png')}
style={{width:24,height:24,marginRight:8,alignItems:'center'}}/>
</TouchableOpacity>
</View>
</View>
4.实现:ViewPagerAndroid
<ViewPagerAndroid
ref={viewPager => { this.viewPager = viewPager; }}
style={styles.flex1}
initialPage={0}
pageMargin={0}>
<View style={styles.page}>
<Text>Page 1</Text>
</View>
<View style={styles.page}>
<Text>Page 2</Text>
</View>
<View style={styles.page}>
<Text>Page 3</Text>
</View>
</ViewPagerAndroid>
5.实现底部导航栏:
<View style={styles.footerMenu}>
<TouchableOpacity onPress={() => this.onClick(1)}>
<Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >首页 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(2)}>
<Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >商城 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(3)} >
<Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
<Text style={styles.welcome} >个人中心 </Text>
</TouchableOpacity>
</View>
6.实现点击事件：TouchableOpacity
<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
.....
</TouchableOpacity>
AppMain.js文件代码：
<Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >首页 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(2)}>
<Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >商城 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(3)} >
<Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
<Text style={styles.welcome} >个人中心 </Text>
</TouchableOpacity>
</View>
</View>
);
}
}
/**
- 属性介绍：
- flexDirection:
- style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向
- justifyContent:
*style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between
- alignItems:
- 在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
- backgroundColor 背景颜色
- borderColor 边界颜色
*/
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.执行：
react-native start
3.来到项目根目录，打开新的cmd
4.执行：
react-native run-android
5.效果：
7.最后附上整个reactNativeTest项目的结构图
来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2244