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 Use Example:
/** * 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:Home, Icon:"Home",}, type:{title:Classification, Icon:"Th-large",}, car:{title:"Shopping Cart", Icon:"Shopping-cart",}, me:{title:"My", 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,st Yles.tabbaritem]}>{param.title}</text> </View>}}class App extends Component {constructor (props) {super (props); } render () {const iconsize=30; return ( <Router>
{/* Lower navigation starts */} <scene key= "Tabbar" name= "Tabbar" duration={0} tabs={true} Style={styles.tabbarcontainer} initial={true}> <scene key= "index" duration={0} Component={index} title= "Home" Icon={tabbar}/> <scene key= "type" duration={0} Component={type} title= "category" Icon={tabbar}/> <scene key= "Car" duration={0} compon Ent={car} title= "Shopping Cart" Icon={tabbar}/> <scene key= "Me" duration={0} Component={me} hidenavbar={true} title= "my" Icon={tabbar}/> </Scene>
{/* Lower navigation End */} <scene key= "info" duration={0} hidenavbar={true} component={info} title= "Details" ></Scene> <scene key= "register" duration={0} hidenavbar={true} Component={register} title= "register" ></Scene> <scene key= "userinfo" duration={0} Component={userinfo} ti tle= "User Details" ></Scene> </Router> ) }}varstyles=stylesheet.create ({tabbarcontainer:{Flex:1, BackgroundColor:"#f6f6f6",}, tabbaritem:{Alignitems:"Center", Justifycontent:"Center", TextAlign:"Center", MarginLeft:-3}}) Appregistry.registercomponent (' Reactapp ', () + = APP);
React-native-router-flux Lower Navigation