React Native学习Android进阶之路Android知识

React Native —— react-navigation

2017-07-21  本文已影响1143人  xiaoyanger

在React Native中，官方已经推荐使用react-navigation来实现各个界面的跳转和不同板块的切换。react-navigation主要包括三个组件：

StackNavigator用于实现各个页面之间的跳转，TabNavigator用来实现同一个页面上不同界面的切换，DrawerNavigator 可以实现侧滑的抽屉效果。

StackNavigator

StackNavigator组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：

StackNavigator(RouteConfigs, StackNavigatorConfig)

有RouteConfigs和StackNavigatorConfig两个参数。

RouteConfigs

RouteConfigs 参数表示各个页面路由配置，类似于android原生开发中的AndroidManifest.xml，它是让导航器知道需要导航的路由对应的页面。

const RouteConfigs = {
    Home: {
        screen: HomePage,
        navigationOptions: ({navigation}) => ({
            title: '首页',
        }),
    },
    Find: {
        screen: FindPage,
        navigationOptions: ({navigation}) => ({
            title: '发现',
        }),
    },
    Mine: {
        screen: MinePage,
        navigationOptions: ({navigation}) => ({
            title: '我的',
        }),
    },
};

这里给导航器配置了三个页面，Home、Find、Mine为路由名称，screen属性值HomePage、FindPage、MinePage为对应路由的页面。

navigationOptions为对应路由页面的配置选项：

StackNavigatorConfig

StackNavigatorConfig参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：

const StackNavigatorConfig = {
    initialRouteName: 'Home',
    initialRouteParams: {initPara: '初始页面参数'},
    navigationOptions: {
        title: '标题',
        headerTitleStyle: {fontSize: 18, color: '#666666'},
        headerStyle: {height: 48, backgroundColor: '#fff'},
    },
    paths: 'page/main',
    mode: 'card',
    headerMode: 'screen',
    cardStyle: {backgroundColor: "#ffffff"},
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
    onTransitionStart: (() => {
        console.log('页面跳转动画开始');
    }),
    onTransitionEnd: (() => {
        console.log('页面跳转动画结束');
    }),
};

页面的配置选项navigationOptions通常还可以在对应页面中去静态配置，比如在HomePage页面中：

export default class HomePage extends Component {

    // 配置页面导航选项
    static navigationOptions = ({navigation}) => ({
        title: 'HOME',
        titleStyle: {color: '#ff00ff'},
        headerStyle:{backgroundColor:'#000000'}
    });

    render() {
        return (
            <View></View>
        )
    };
}

同样地，在页面里面采用静态的方式配置navigationOptions中的属性，会覆盖StackNavigator构造函数中两个参数RouteConfigs和StackNavigatorConfig配置的navigationOptions里面的对应属性。navigationOptions中属性的优先级是：
页面中静态配置 > RouteConfigs > StackNavigatorConfig

有了RouteConfigs和StackNavigatorConfig两个参数，就可以构造出一个导航器组件StackNavigator，直接引用该组件：

const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);

export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        )
    };
}

已经配置好导航器以及对应的路由页面了，但是要完成页面之间的跳转，还需要navigation。

navigation

在导航器中的每一个页面，都有navigation属性，该属性有以下几个属性/方法：

navigete

调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数：
— routeName 导航器中配置的路由名称
— params 传递参数到下一个页面
— action action
比如：this.props.navigation.navigate('Find', {param: 'i am the param'});

state

state里面包含有传递过来的参数params、key、路由名称routeName，打印log可以看得到：

{ 
  params: { param: 'i am the param' },
  key: 'id-1500546317301-1',
  routeName: 'Mine' 
}
setParams

更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题。

componentDidMount() {
    this.props.navigation.setParams({param:'i am the new param'})
}
goBack

回退，可以不传，也可以传参数，还可以传null。

this.props.navigation.goBack();       // 回退到上一个页面
this.props.navigation.goBack(null);   // 回退到任意一个页面
this.props.navigation.goBack('Home'); // 回退到Home页面

TabNavigator

TabNavigator，即是Tab选项卡，类似于原生android中的TabLayout，它的构造函数：

TabNavigator(RouteConfigs, TabNavigatorConfig)

api和StackNavigator类似，参数RouteConfigs是路由配置，参数TabNavigatorConfig是Tab选项卡配置。

RouteConfigs

路由配置和StackNavigator中是一样的，配置路由以及对应的screen页面，navigationOptions为对应路由页面的配置选项：

TabNavigatorConfig
底部Tab导航示例
import React, {Component} from 'react';
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
import HomeScreen from "./index18/HomeScreen";
import NearByScreen from "./index18/NearByScreen";
import MineScreen from "./index18/MineScreen";
import TabBarItem from "./index18/TabBarItem";
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}

const TabRouteConfigs = {
    Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_homepage_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')}
                />
            ),
        }),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            tabBarLabel: '附近',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_merchant_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')}
                />
            ),
        },
    }
    ,
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_mine_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')}
                />
            ),
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);
顶部Tab选项卡示例
import React, {Component} from "react";
import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation";
import HomeScreen from "./index18/HomeScreen";
import NearByScreen from "./index18/NearByScreen";
import MineScreen from "./index18/MineScreen";
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}

const TabRouteConfigs = {
    Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
        }),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            tabBarLabel: '附近',
        },
    }
    ,
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarTop,
    tabBarPosition: 'top',
    lazy: true,
    tabBarOptions: {}
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

DrawerNavigator

在原生Android MD 风格里面很多app都会采用侧滑抽屉来做主页面的导航，利用DrawerNavigator在RN中可以很方便来实现抽屉导航。

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

和DrawerNavigator的构造函数一样，参数配置也类似。

RouteConfigs

抽屉导航的路由配置RouteConfigs，和TabNavigator的路由配置完全一样，screen配置对应路由页面，navigationOptions为对应页面的抽屉配置选项：

DrawerNavigatorConfig

抽屉配置项属性：

抽屉导航示例
import React, {Component} from 'react';
import {DrawerNavigator, StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
import HomeScreen from "./index18/HomeScreen";
import NearByScreen from "./index18/NearByScreen";
import MineScreen from "./index18/MineScreen";
import TabBarItem from "./index18/TabBarItem";
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}
const DrawerRouteConfigs = {
    Home: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => ({
            drawerLabel : '首页',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_homepage_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')}
                />
            ),
        }),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            drawerLabel : '附近',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_merchant_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')}
                />
            ),
        },
    },
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            drawerLabel : '我的',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./img/tabbar/pfb_tabbar_mine_2x.png')}
                    selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')}
                />
            ),
        },
    }
};
const DrawerNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {}
};
const Drawer = DrawerNavigator(DrawerRouteConfigs, DrawerNavigatorConfigs);
const StackRouteConfigs = {
    Drawer: {
        screen: Drawer,
    }
};
const StackNavigatorConfigs = {
    initialRouteName: 'Drawer',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

源码：https://gitee.com/xiaojianjun/DD.git （index20.js、index21.js、index22.js）

参考

https://reactnavigation.org/docs/
ReactNative导航新宠儿react-navigation

上一篇 下一篇

猜你喜欢

热点阅读