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的router                    selectedIndex === index?isSelected = true:isSelected = false;                    //显示不同外观                    let textColor = isSelected?'blue':'gray';                    return (                        <TouchableOpacity                            onPress={() => {                          navigation.navigate(route.routeName);                      }}                            key={route.routeName}                            style={styles.tab}                        >                            <Text style={{color:textColor,fontSize:12}}>{route.routeName}</Text>                        </TouchableOpacity>                    )                })}        </View>    );};//设置TabBarconst 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}>            <ActiveScreen                navigation={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'    });//创建自定义TabBarconst 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');                        }}                />