1 npm install react-native-tab-navigator –save
2 import TabNavigator from ‘react-native-tab-navigator’;
3 homeUI.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} from ‘react-native’;
import TabNavigator from ‘react-native-tab-navigator’;
class HomeUI extends Component {
constructor(props) {
super(props);//这一句不能省略,照抄即可
this.state = {
selectedTab: 'home',
};
}
render() {
var homeView = (
<View style={[styles.flex, styles.center,{backgroundColor:'#ffff0044'}]}>
<Text style={{ fontSize: 22 }}>我是主页</Text>
</View>
);
var settingView = (
<View style={[styles.flex, styles.center,{backgroundColor:'#ff000044'}]}>
<Text style={{ fontSize: 22 }}>我是设置页面</Text>
</View>
);
return (
<TabNavigator
tabBarStyle={{ height: 60 }}
>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="主页"
renderIcon={() => <Image style={styles.img} source={require('./home_tab_home_normal.png') }/>}
renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_home_pressed.png') }/>}
badgeText="200"
onPress={() => this.setState({ selectedTab: 'home' })}
>
{homeView}
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'setting'}
title="设置"
renderIcon={() => <Image style={styles.img} source={require('./home_tab_setting_normal.png') }/>}
renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_setting_pressed.png') }/>}
renderBadge={() => <Text>东方耀</Text>}
onPress={() => this.setState({ selectedTab: 'setting' })}
>
{settingView}
</TabNavigator.Item>
</TabNavigator>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
},
img: {
width: 40,
height: 33,
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
});
module.exports = HomeUI;
4.index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,
Text,
Image,
TouchableOpacity,
ViewPagerAndroid,
Navigator,
View
} from ‘react-native’;
import LikeCount from ‘./LikeCount.js’;//导入喜欢数 组件
import Button from ‘./Button.js’;//导入 自定义的按钮的 组件
import HomeUI from ‘./HomeUI.js’;//导入 首页 组件
const PAGES=5;
const BGCOLOR=[‘#fdc08e’, ‘#fff6b9’, ‘#99d1b7’, ‘#dde5fe’, ‘#f79273’];
const IMAGE_URIS=[
‘http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg‘,
‘http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg‘,
‘http://apod.nasa.gov/apod/image/1409/m27_snyder_960.jpg‘,
‘http://apod.nasa.gov/apod/image/1409/PupAmulti_rot0.jpg‘,
‘https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png‘,
];
class ProgressBar extends Component{
//进度条组件
constructor(props) {
super(props);
}
render(){
//当前位置+偏移量
var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
return(
//这进度条 2个view搞定了 通过宽度来区别
//progressBarSize当前的进度
//this.props.size总共的大小 或者 是进度的长度
<View style={[styles.progressBarContainer, {width: this.props.size}]}>
<View style={[styles.progressBar, {width: progressBarSize}]}/>
</View>
);
}
}
class WelcomeUI extends Component {
//引导页 或者 欢迎界面 用viewpager实现
//null is not an object 解决办法:初始化的时候要用constructor 而不是getInitialState
//current using ES6 as standart programming.
//to initial state you must create cnostructor in your react component class
//用构造函数来替代之前的 Initial实例化
constructor(props) {
super(props);
this.state = {
page: 0,
animationsAreEnabled: true,//动画是否开启
progress: {
position: 0,
offset: 0,
},
};
//undefined is not a function (evaluating
//React components using ES6 classes no longer autobind this to non React methods
//this.setState=this.setState.bind(this);
}
//getInitialState(){
// return {
// page: 0,
// animationsAreEnabled: true,
// progress: {
// position: 0,
// offset: 0,
// },
// };
//}
onPageSelected=(e)=>{
//这个回调会在页面切换完成后(当用户在页面间滑动)调用
//回调参数中的event.nativeEvent对象
this.setState({page:e.nativeEvent.position});
}
//onPageScroll(e){
// //当在页间切换时(不论是由于动画还是由于用户在页间滑动/拖拽)执行。
// this.setState({progress:e.nativeEvent});
//}
//See React on ES6+
onPageScroll=(e)=>{
//当在页间切换时(不论是由于动画还是由于用户在页间滑动/拖拽)执行。
// 回调参数中的event.nativeEvent对象会包含如下数据:
//
//position 从左数起第一个当前可见的页面的下标。
//
//offset 一个在[0,1)(大于等于0,小于1)之间的范围,代表当前页面切换的状态。值x表示现在”position”所表示的页有(1 - x)的部分可见,而下一页有x的部分可见。
this.setState({progress:e.nativeEvent});
}
move(delta){
var page=this.state.page+delta;
this.go(page);
}
go(page){
if(this.state.animationsAreEnabled){
this.viewPager.setPage(page);
}else{
this.viewPager.setPageWithoutAnimation(page);
}
//刷新了
this.setState({page});
}
onClick=()=>{
//alert(‘点击了’);
const { navigator } = this.props;
//为什么这里可以取得 props.navigator?请看上文:
//