owl's blog

react-native navigation的基本使用

2020.01.10

简介

react-native-navigation 社区主推的组件,可实现基本的导航,底部导航,抽屉

安装

1、在项目中安装react-navigation,现在最新的已经是4.x 版本

yarn add react-navigation 或者 npm install react-navigation

2、给原生的 React Native 项目安装依赖

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context

安装完成之后需要link

react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens
react-native link react-native-safe-area-context

要完成Android的react-native手势处理程序的安装,请对MainActivity.java进行以下修改:(不修改的话导航的手势滑动不能使用)

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
@Override
 protected ReactActivityDelegate createReactActivityDelegate() {
   return new ReactActivityDelegate(this, getMainComponentName()) 
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

使用

createSwitchNavigator 的是创建一个只显示一个页面。默认情况下,它不处理返回操作,在你切换时将路由重置为默认状态。在处理启动页,登录页,首页使用这种返回直接退出程序

//引入所有页面
import page from './page'; 
import Login from '../pages/Login/Login';
import StartPage from '../pages/StartPage/StartPage'
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
// 6.0以上的写法 前面的版本没被分开 现在需要引入react-navigation-stack
import { createStackNavigator } from 'react-navigation-stack';
const AppNavigator = createStackNavigator(page);
const AppContainer = createSwitchNavigator({
    StartPage, Login, AppNavigator,
});

export default createAppContainer(AppContainer);

page 为所有路由的配置文件,需要注册路由不然无法进行跳转

page.js

import Home from '../pages/Home/Home';
import Study from '../pages/Study/Study';
import TabPage from '../pages/TabPage/TabPage'
import Main from '../pages/Main/Main'
import Test from '../pages/Test'
export default {
    TabPage: {
        screen: TabPage
    },
    Home: {
        screen: Home
    },
    Study: {
        screen: Study
    },
    Main: {
        screen: Main
    },
    Test: {
        screen: Test
    },
}

现在基本的路由配置完成了,开始实现底部导航


import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

export default TabNavigator = createMaterialTopTabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '主页',
            tabBarIcon: ({ tintColor, focused }) => (
                <Image
                    source={focused ? require('../../images/home-select.png') : require('../../images/home.png')}
                    style={[{ height: 24, width: 24 }]}
                />
            ),
        },
    },
    Study: {
        screen: Study,
        navigationOptions: {
            tabBarLabel: '书城',
            tabBarIcon: ({ tintColor, focused }) => (
                <Image
                    source={focused ? require('../../images/Book-select.png') : require('../../images/Book.png')}
                    style={[{ height: 24, width: 24 }]}
                />
            ),
        },
    },
    Login: {
        screen: Login,
        navigationOptions: {
            tabBarLabel: '练习',
            tabBarIcon: ({ tintColor, focused }) => (
                <Image
                    source={require('../../images/studying.png')}
                    style={[{ height: 24, width: 24 }]} />
            ),
        }
    },
    Main: {
        screen: Main,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor, focused }) => (
                <Image
                    source={require('../../images/my.png')}
                    style={[{ height: 24, width: 24 }]} />
            ),
        }
    },
}, {
    swipeEnabled: false,
    animationEnabled: false,
    tabBarPosition: "bottom",
    lazy: true,
    navigationOptions: {
        header: null,
    },
    tabBarOptions: {
        activeTintColor: '#1296db',
        inactiveTintColor: '#111111',
        showIcon: true, // 是否显示图标, 默认为false
        showLabel: true, // 是否显示label
        pressColor: '',
        labelStyle: {
            fontSize: 12,
        },
        style: {
            backgroundColor: '#fff',
            borderTopWidth: 0.5,
            borderTopColor: 'grey',
        },
        indicatorStyle: {
            height: 0,
        },
    },

});