React Native利用router-flux簡單實現標籤頁切換

第一步建立一個react native 項目，在建立好的的項目App.js中引入 router-flux

App.js代碼

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image} from 'react-native';
import {Scene,Router,Tabs} from "react-native-router-flux";
import Information from "./app/first/Information";
import Me from "./app/fourth/Me";
import MailList from "./app/second/MailList";
import Find from "./app/third/Find";


type Props = {};
export default class App extends Component<Props> {
    InformationIcon=({focused})=>{
        if(focused){
            return(
                <Image style={{width:32,height:32}} source={require("./img/xinxi3.png")}/>
            )
        }else {
            return(
                <Image style={{width:32,height:32}} source={require("./img/xinxi1.png")}/>
            )
        }
    }
    MailListIcon=({focused})=> {
        if (focused){
            return(
                <Image style={{height: 30, width: 30}} source={require('./img/tongxunluZ.png')}/>
            )
        } else {
            return(
                <Image style={{width:30,height:30}} source={require("./img/tongxunlu.png")}/>
            )
        }
    }


    MeIcon=({focused})=> {
        if (focused){
            return(
                <Image style={{height: 30, width: 30}} source={require('./img/faxianZ.png')}/>
            )
        } else {
            return(
                <Image style={{width:30,height:30}} source={require("./img/faxian.png")}/>
            )
        }
    }
    FindIcon=({focused})=> {
        if (focused){
            return(
                <Image style={{height: 30, width: 30}} source={require('./img/woZ.png')}/>
            )
        } else {
            return(
                <Image style={{width:30,height:30}} source={require("./img/wo.png")}/>
            )
        }
    }
  render() {
    return (
        <Router>
            <Scene  key="root" initial={true} tabBarPosition={"bottom"} >
                <Tabs
                    key={"tabbar"}
                    swipeEnabled={true}
                    hideNavBar={true}
                    //隱藏標籤欄
                    wrap={false}
                    showLable={false}
                    activeBackgroundColor={"white"}
                    inactiveBackgroundColor={"white"}
                    activeTintColor={"#46B11C"}
                    inactiveTintColor={"#9A9A9A"}
                    tabBarStyle={{height:65}}
                    labelStyle={{paddingBottom:0,fontSize:14}}
                >
                    <Scene key={"Information"} component={Information} title="微信" icon={this.InformationIcon}/>
                    <Scene key={"MailList"} component={MailList}  title="通信錄" icon={this.MailListIcon}/>
                    <Scene key={"Find"} component={Find} title="發現" icon={this.MeIcon}/>
                    <Scene key={"Me"} component={Me} title="我"icon={this.FindIcon}/>
                </Tabs>
            </Scene>
        </Router>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

View Code

 

而後我是建立了一個app而後裏面建立了四個文件夾，裏面分別放了切換的四個頁面

總結：

項目建立好有一個App.js ——》

一個本身建立的app文件夾——》

一個本身建立的img文件夾存放圖片  ——》

最後經過App.js引入進app文件中的代碼

 

模塊不多，代碼不多。

效果圖：

 

 

 源碼:

連接: https://pan.baidu.com/s/1jUdAZBOh2mkQO8TQxBGZ1Q

提取碼: vvtc