react-native-router-flux 下部導航

標籤：initial   create   react   bsp   this   ima   duration   home   gis   

github url：https://github.com/aksonov/react-native-router-flux

API: https://github.com/aksonov/react-native-router-flux/blob/master/docs/API_CONFIGURATION.md

react-native-router-flux使用樣本：

/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;import {    AppRegistry,    View,    Text,    StyleSheet,    Image,} from "react-native";import React, { Component } from "react";import {  Navigation,  Scene,  Router} from ‘react-native-router-flux‘;import Index from ‘./page/index‘;import Me from ‘./page/me‘;import Info from ‘./page/info‘;import Type from ‘./page/type‘;import Car from ‘./page/shopCar‘;import Register from ‘./page/register‘;import Userinfo from ‘./page/userinfo‘;import Icon from ‘react-native-vector-icons/FontAwesome‘;class TabBar extends Component{  constructor(props){    super(props);    this.data={      index:{        title:"首頁",        icon:"home",      },      type:{        title:"分類",        icon:"th-large",      },      car:{        title:"購物車",        icon:"shopping-cart",      },      me:{        title:"我的",        icon:"user",      }    }  }  render(){    let param=this.data[this.props.sceneKey];    let activeStyle=this.props.selected?{color:"#3399FF"}:{};    return <View>      <Icon name={param.icon} color={activeStyle.color} size={25}/>      <Text style={[activeStyle,styles.tabbarItem]}>{param.title}</Text>    </View>  }}class App extends Component {    constructor(props){      super(props);    }    render() {      const iconSize=30;      return (        <Router>
　　　　　　{/*下部導航開始*/}          <Scene key="tabbar" name="tabbar" duration={0} tabs={true} style={styles.tabbarContainer} initial={true}>            <Scene key="index" duration={0} component={Index} title="首頁" icon={TabBar} />            <Scene key="type" duration={0} component={Type} title="分類" icon={TabBar} />            <Scene key="car" duration={0} component={Car} title="購物車" icon={TabBar} />            <Scene key="me"  duration={0} component={Me} hideNavBar={true} title="我的" icon={TabBar} />          </Scene>
　　　　　　{/*下部導航結束*/}          <Scene key="info" duration={0} hideNavBar={true} component={Info} title="詳情"></Scene>          <Scene key="register" duration={0} hideNavBar={true} component={Register} title="註冊"></Scene>          <Scene key="userinfo" duration={0} component={Userinfo} title="使用者詳情"></Scene>        </Router>      )    }}var styles=StyleSheet.create({    tabbarContainer:{      flex:1,      backgroundColor:"#f6f6f6",    },    tabbarItem:{      alignItems:"center",      justifyContent:"center",      textAlign:"center",      marginLeft:-3    }})AppRegistry.registerComponent(‘reactApp‘, () => App);

 

react-native-router-flux 下部導航