本文主要是介绍React Navigation 自认比较好的navigator组件（三），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这篇文章主要的内容是自定义的navigator，因为在某些情况下，默认的StackNavigator和TabNavigator无法满足需求（TabNavigator在android环境下默认是基于scrollView的滚动样式，会导致一些第三方组件无法正常运行，并且也不好修改）,所以就需要我们按照自己的想法来自定一个navigator。http://www.jianshu.com/p/27288498d819
Custom Navigators
一个导航器可以是一个任何拥有router的React组件，下面是一个简单的例子:
class MyNavigator extends React.Component {static router = MyRouter;render() {const { state, dispatch } = this.props.navigation;const { routes, index } = state;// Figure out what to render based on the navigation state and the router:const Component = MyRouter.getComponentForState(state);// The state of the active child screen can be found at routes[index]let childNavigation = { dispatch, state: routes[index] };// If we want, we can also tinker with the dispatch function here, to limit// or augment our children's actions// Assuming our children want the convenience of calling .navigate() and so on,// we should call addNavigationHelpers to augment our navigation prop:childNavigation = addNavigationHelpers(childNavigation);return <Component navigation={childNavigation} />;}
}自己模仿示例代码自定义了一个TabBar
/*** Created by Guodada on 2017/3/2.*/
import React from 'react';
import {Button,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View,Dimensions,TouchableHighlight,} from 'react-native';import {createNavigator,createNavigationContainer,TabRouter,addNavigationHelpers,
} from 'react-navigation';//导入界面
import Home from './Home/Home';
import Find from './Find/Find';
import Me from './Me/Me';
import Contacts from './Contacts/Contacts';const {width,height} = Dimensions.get('window');//设置每个标签
const CustomTabBar = ({navigation
}) => {console.log('TabBar navigation ============'+ navigation.state.index);const {routes} = navigation.state;let selectedIndex = navigation.state.index;let isSelected = false;return (<View style={styles.tabContainer}>{routes.map((route,index) =>{//如果当前选中该index的routerselectedIndex === index?isSelected = true:isSelected = false;//显示不同外观let textColor = isSelected?'blue':'gray';return (<TouchableOpacityonPress={() => {navigation.navigate(route.routeName);}}key={route.routeName}style={styles.tab}><Text style={{color:textColor,fontSize:12}}>{route.routeName}</Text></TouchableOpacity>)})}</View>);
};//设置TabBar
const CustomTabView = ({router,navigation
}) => {console.log('navigation ============>>>>>'+ navigation.state.index);const {routes,index} = navigation.state;const ActiveScreen = router.getComponentForState(navigation.state);return (<View style={styles.container}><ActiveScreennavigation={addNavigationHelpers({...navigation,state:routes[index],})}/><CustomTabBar navigation={navigation}/></View>);
};//自定义导航路由
const CustomTabRouter = TabRouter({Home:{screen:Home,},Me:{screen:Me,},Contacts:{screen:Contacts,},Find:{screen:Find,},}, {initialRouteName:'Home'}
);//创建自定义TabBar
const CustomTabs = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView));const styles = StyleSheet.create({container: {flex:1,justifyContent:'center'},tabContainer: {flexDirection: 'row',height: 48,borderTopWidth:1,borderColor:'lightgray'},tab: {flex: 1,alignItems: 'center',justifyContent: 'flex-end',margin: 4,borderWidth: 1,borderColor: '#ddd',borderRadius: 4,}
});export default CustomTabs; 文末彩蛋，传值方式
从前往后：
<Button title='Press me!'onPress={() => navigate('Home_2',{passValue:(value)=> console.log('The value passed by child scene is '+ value),name:'jack'})}color='black'/>从后往前：
<Button title='<Back'onPress={()=> {goBack();state.params.passValue('This is the value needs to pass front scene');}}/>这篇关于React Navigation 自认比较好的navigator组件（三）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
