React Native学习（三）—— 使用导航器Navigation跳转页面

本文基于React Native 0.52

参考文档https://reactnavigation.org/docs/navigators/navigation-prop

一、基础

1、`三种类型`

- TabNavigator —— 用于设置多个选项卡的页面
- StackNavigator —— 用于页面之间的跳转
- DrawerNavigator —— 用于侧面滑出的抽屉效果

　　2、属性配置

- navigate(routeName, params, action) —— 跳转页面
  - routeName：目标路由名称
  - params：传递参数（目标页面用this.props.navigation.state.params可以取出参数）
  - action：在子页面运行的操作（没用过，有需要可以参看官方文档）
- state —— 当前页面的状态
  - 例如，传递的params就存在state中
- setParams —— 设置路由参数
- goBack —— 关闭当前页面，返回上一页
  - 也可以设置返回到指定页（如：a-->b-->c-->d，如果goBack()，则d返回到c；如果goBack(b)，则d返回到a）
- dispatch —— 发送一个动作到路由（没用过，有需要可以参看官方文档）

二、实例

安装react-navigation

npm install react-navigation --save

　　1、TabNavigator

　　① 添加几个简单的页面（如下图中的home、user、category，都是一样的，就改下名字）　　

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
} from 'react-native';

export default class home extends Component {

    render() {
        return (
            <View style={styles.container}>
                <Text>home</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#ff9999',
    },
});

②App.js

引入需要跳转的页面；根据需要引入三种导航

import {DrawerNavigator,StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';

import Home from './app/page/home/home';
……………………省略

设置切换的页面及其label、icon；设置tabBar位置、动画，状态样式等

const Tab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '首页',
                tabBarIcon: ({ tintColor }) => (
                    <Image source={require('./app/img/home.png')} style={[{ tintColor: tintColor, width: 25, height: 25 }]} />
                ),
            })
        },
        ………………省略
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',//tabBar位置
        // swipeEnabled: false,//是否滑动切换，默认true
        animationEnabled: true,
        lazy: true,
        tabBarOptions: {
            activeTintColor: '#ff4f39',
            inactiveTintColor: '#979797',
            style: { backgroundColor: '#ffffff' },
        },
    }
);

App.js完整代码

import React, { Component } from 'react';
import {
  Text,
  Image,
  View
} from 'react-native';

import { DrawerNavigator, StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';

import Home from './app/page/home/home';
import Category from './app/page/category/category';
import User from './app/page/user/user';

export default class App extends Component<{}> {
  render() {
    return (
        <Tab />
    );
  }
}

const Tab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '首页',
                tabBarIcon: ({ tintColor }) => (
                    <Image source={require('./app/img/home.png')} style={[{ tintColor: tintColor, width: 25, height: 25 }]} />
                ),
            })
        },
        Category: {
            screen: Category,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '分类',
                tabBarIcon: ({ tintColor }) => (
                    <Image source={require('./app/img/category.png')} style={[{ tintColor: tintColor, width: 25, height: 25 }]} />
                ),
            })
        },
        User: {
            screen: User,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '我的',
                tabBarIcon: ({ tintColor }) => (
                    <Image source={require('./app/img/user.png')} style={[{ tintColor: tintColor, width: 25, height: 25 }]} />
                ),
            })
        },
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: 'bottom',
        // swipeEnabled: false,//是否滑动切换，默认true
        animationEnabled: true,
        lazy: true,
        tabBarOptions: {
            activeTintColor: '#ff4f39',
            inactiveTintColor: '#979797',
            style: { backgroundColor: '#ffffff' },
        },
    }
);

2、StackNavigator

①在App.js中加入如下代码。把tab包含到这里面，search就是需要跳转的页面。

const Stack = StackNavigator(
    {
        Tab: { screen: Tab },
        Search: { screen: Search },
    },

    {
        navigationOptions: {
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
            gesturesEnabled: true,
            header: null, 
        },
        mode: 'card',
        headerMode: 'screen',
    }
);

　　　　②在home.js添加一个按钮，点击跳转Search页面

<Button 
      onPress={() => {this.props.navigation.navigate('Search')}}
      title="go to Search"
  />

3、DrawerNavigator

　　　　① 在App.js加入DrawerNavigator ，把StackNavigator包在里面（现在从外到里的顺序是DrawerNavigator,StackNavigator, TabNavigator）

const Drawer = DrawerNavigator(
    {
        Stack: { screen: Stack },
        Search: { screen: Search },
    },
);

　 ②在home.js添加一个按钮，点击打开侧边栏

<Button 
    onPress={() => {this.props.navigation.navigate('DrawerToggle')}}
    title="Drawer"
 />

具体有不清楚的可以看这个 navigation的文档（https://reactnavigation.org/docs/navigators/navigation-prop）

END----------------------------------------------------------------------------------------

一、基础

1、三种类型

2、属性配置

二、实例

1、TabNavigator

2、StackNavigator

3、DrawerNavigator

1、`三种类型`

　　2、属性配置

　　1、TabNavigator