react-native新导航组件react-navigation详解

忘是亡心i 2022-04-24 01:56 260阅读 0赞

有问题找 [issues][], 基本上坑都在这里.

[官方文档][Link 1]

## 主要构成 ##

按使用形式主要分三部分:

1 `StackNavigator`: 类似于普通的Navigator，屏幕上方导航栏  
2 `TabNavigator`: 相当于iOS里面的TabBarController，屏幕下方的标签栏  
3 `DrawerNavigator`: 抽屉效果，侧边滑出

## StackNavigator 导航栏 ##

API: `StackNavigator(RouteConfigs, StackNavigatorConfig)`

// 注册导航 
        const Navs = StackNavigator({ 
        Home: { screen: Tabs }, 
        HomeTwo: { 
        screen: HomeTwo, // 必须, 其他都是非必须 
        path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking 
        navigationOptions: {} // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文 
        }, 
        HomeThree: { screen: HomeThree }, 
        HomeFour: { screen: HomeFour } 
        }, { 
        initialRouteName: 'Home', // 默认显示界面 
        navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置) 
        header: { // 导航栏相关设置项 
        backTitle: '返回', // 左上角返回键文字 
        style: { 
        backgroundColor: '#fff' 
        }, 
        titleStyle: { 
        color: 'green' 
        } 
        }, 
        cardStack: { 
        gesturesEnabled: true 
        } 
        }, 
        mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) 
        headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏 
        onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调 
        onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调 
        });

### navigationOptions ###

参数:

*  `title`: 导航栏的标题
 *  `header`: 导航栏设置对象
    
     *  `visible`: 导航栏是否显示
     *  `title`: 导航栏的标题, 可以是字符串也可以是个组件
     *  `backTitle`: 左上角的返回键文字, 默认是上一个页面的title
     *  `right`: 导航栏右按钮
     *  `left`: 导航栏左按钮
     *  `style`: 导航栏的style
     *  `titleStyle`: 导航栏的title的style
     *  `tintColor`: 导航栏颜色
 *  `cardStack`: 配置card stack
    
     *  `gesturesEnabled`: 是否允许右滑返回，在iOS上默认为true，在Android上默认为false

在组件中设置`static navigationOptions`示例:

static navigationOptions = { 
        title: 'homeThree', 
        header: (navigation, defaultHeader) => ({ 
        ...defaultHeader, // 默认预设 
        visible: true // 覆盖预设中的此项 
        }), 
        cardStack: { 
        gesturesEnabled: false // 是否可以右滑返回 
        } 
        }; 
        
        // 或这样 
        static navigationOptions = { 
        // title: 'Two', // 写死标题 
        title: (navigation, childRouter) => { // 动态标题 
        if (navigation.state.params.isSelected) { 
        return `${navigation.state.params.name}选中`; 
        } else { 
        return `${navigation.state.params.name}没选中`; 
        } 
        }, 
        header: ({ state, setParams, goBack }) => { 
        let right; 
        if (state.params.isSelected) { 
        right = (<Button title="取消" onPress={() => setParams({ isSelected: false })}/>); 
        } else { 
        right = (<Button title="选择" onPress={() => setParams({ isSelected: true })}/>); 
        } 
        let left = (<Button title="返回" onPress={() => goBack()}/>); 
        let visible = false; // 是否显示导航栏 
        return { right, left, visible }; 
        }, 
        // header: {left: <Button title="返回"/>}, 
        };

### StackNavigatorConfig ###

参数:

*  `initialRouteName`: 设置默认的页面组件，必须是上面已注册的页面组件
 *  `initialRouteParams`: 初始路由的参数
 *  `navigationOptions`: 屏幕导航的默认选项
 *  `paths`: RouteConfigs里面路径设置的映射
 *  `mode`: 页面切换模式:
    
     *  `card`: 普通app常用的左右切换
     *  `modal`: 上下切换
 *  `headerMode`: 导航栏的显示模式:
    
     *  `float`: 无透明效果, 默认
     *  `screen`: 有渐变透明效果, 如微信QQ的一样
     *  `none`: 隐藏导航栏
 *  `cardStyle`: 样式
 *  `onTransitionStart`: 页面切换开始时的回调函数
 *  `onTransitionEnd`: 页面切换结束时的回调函数

## TabNavigator 标签栏 ##

// 注册tabs 
        const Tabs = TabNavigator({ 
        Home: { 
        screen: Home, 
        navigationOptions: { // 也可以写在组件的static navigationOptions内 
        tabBar: { 
        label: '首页', 
        icon: ({tintColor}) => (<Image source={ require( './app/images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>), 
        }, 
        } 
        }, 
        Bill: { 
        screen: Bill, 
        navigationOptions: { 
        tabBar: { 
        label: '账单', 
        icon: ({tintColor}) => (<Image source={ require( './app/images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>), 
        }, 
        } 
        }, 
        Me: { 
        screen: Me, 
        navigationOptions: { 
        tabBar: { 
        label: '我', 
        icon: ({tintColor}) => (<Image source={ require( './app/images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>), 
        }, 
        } 
        } 
        }, { 
        animationEnabled: false, // 切换页面时是否有动画效果 
        tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的 
        swipeEnabled: false, // 是否可以左右滑动切换tab 
        backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转 
        tabBarOptions: { 
        activeTintColor: '#ff8500', // 文字和图片选中颜色 
        inactiveTintColor: '#999', // 文字和图片未选中颜色 
        showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 
        indicatorStyle: { 
        height: 0 // 如TabBar下面显示有一条线，可以设高度为 0 后隐藏 
        }, 
        style: { 
        backgroundColor: '#fff', // TabBar 背景色 
        // height: 44 
        }, 
        labelStyle: { 
        fontSize: 10, // 文字大小 
        }, 
        }, 
        });

## DrawerNavigator抽屉 ##

const DrawerNav = DrawerNavigator({ 
        Home: { screen: Home }, 
        Bill: { screen: Bill }, 
        Me: { screen: Me }, 
        HomeTwo: { screen: HomeTwo }, 
        HomeThree: { screen: HomeThree }, 
        HomeFour: { screen: HomeFour }, 
        BillTwo: { screen: BillTwo }, 
        BillThree: { screen: BillThree } 
        }, { 
        drawerWidth: 200, // 抽屉宽 
        drawerPosition: 'left', // 抽屉在左边还是右边 
        // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 
        contentOptions: { 
        initialRouteName: Home, // 默认页面组件 
        activeTintColor: 'white', // 选中文字颜色 
        activeBackgroundColor: '#ff8500', // 选中背景颜色 
        inactiveTintColor: '#666', // 未选中文字颜色 
        inactiveBackgroundColor: '#fff', // 未选中背景颜色 
        style: { // 样式 
        
        } 
        } 
        });

## navigation ##

在`StackNavigator`中注册后的组件都有`navigation`这个属性. `navigation`又有5个参数:`navigate`, `goBack`, `state`, `setParams`, `dispatch`, 可以在组件下`console.log`一下`this.props`就能看到.

*  `this.props.navigation.navigate('Two', { name: 'two' })`: push下一个页面
    
     *  `routeName`: 注册过的目标路由名称
     *  `params`: 传递的参数
     *  `action`: 如果该界面是一个navigator的话，将运行这个sub-action
 *  `this.props.navigation.goBack()`: 返回上一页
 *  `this.props.navigation.state`: 每个界面通过这去访问它的router，state其中包括了：
    
     *  `routeName`: 路由名
     *  `key`: 路由身份标识
     *  `params`: 参数
 *  `this.props.navigation.setParams`: 该方法允许界面更改router中的参数，可以用来动态的更改导航栏的内容
 *  `this.props.navigation.dispatch`: 可以dispatch一些action，主要支持的action有：
    
     *  `Navigate`:
        
            import { NavigationActions } from 'react-navigation' 
                    
                    const navigationAction = NavigationActions.navigate({ 
                    routeName: 'Profile', 
                    params: {}, 
                    
                    // navigate can have a nested navigate action that will be run inside the child router 
                    action: NavigationActions.navigate({ routeName: 'SubProfileRoute'}) 
                    }) 
                    this.props.navigation.dispatch(navigationAction)
     *  `Reset`: Reset方法会清除原来的路由记录，添加上新设置的路由信息, 可以指定多个action，index是指定默认显示的那个路由页面, 注意不要越界了
        
            import { NavigationActions } from 'react-navigation' 
                    
                    const resetAction = NavigationActions.reset({ 
                    index: 0, 
                    actions: [ 
                    NavigationActions.navigate({ routeName: 'Profile'}), 
                    NavigationActions.navigate({ routeName: 'Two'}) 
                    ] 
                    }) 
                    this.props.navigation.dispatch(resetAction)
     *  `SetParams`: 为指定的router更新参数，该参数必须是已经存在于router的param中
        
            import { NavigationActions } from 'react-navigation' 
                    
                    const setParamsAction = NavigationActions.setParams({ 
                    params: {}, // these are the new params that will be merged into the existing route params 
                    // The key of the route that should get the new params 
                    key: 'screen-123', 
                    }) 
                    this.props.navigation.dispatch(setParamsAction)

### Navigation Actions ###

*  支持以下actions:
    
     *  `Navigate`:
     *  `Reset`:
     *  `Back`:
     *  `Set Params`:
     *  `Init`:

## Deep Link ##

其他app或浏览器使用url打开次app并进入指定页面. 如浏览器输入url `demo4://home/home3`直接进入`home3`页面.

### iOS版设置 ###

1.  使用Xcode设置`Schemes`;
2.  在`AppDelegate`添加一下代码:

- ( BOOL) application:( UIApplication *)application openURL:( NSURL *)url 
        sourceApplication:( NSString *)sourceApplication annotation:( id)annotation { 
        return [RCTLinkingManager application:application openURL:url 
        sourceApplication:sourceApplication annotation:annotation]; 
        }

1.  js组件在注册路由时设置唯一的路径path, 例如`Home2: { screen: Home2, path:'app/Home2' }`;
2.  在手机浏览器访问`demo4://app/Home2`, 弹窗选择打开, 就可以打开`demo4` app并进到`Home2`页面了.

[issues]: https://github.com/react-community/react-navigation/issues
[Link 1]: https://reactnavigation.org/docs/intro/