【原创】东方耀reactnative 视频31之-开源导航组件 react-native-tab-navigator

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?请看上文:
//