前言

这是wix出的react-native导航（路由）组件，据说性能比同类产品好，奈何全是英文资料，仔细研究了几天，再加上平时写项目，现总结如下。

安装

这种涉及原生知识的react-native组件，身为前端的我只能根据官网教程照猫画虎的配，我就不献丑了！！！

需要注意的是，整个项目安卓的gradle版本最好一致，如果你有一颗爱好折腾的心，当我没说。。。

基本使用

定义组件注册函数

import { Navigation } from 'react-native-navigation';

import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import PushedScreen from './PushedScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
}

startTabBasedApp

项目的入口文件(index.ios.js/index.android.js/app.js)

先注册所有组件

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens(); // this is where you register all of your app's screens

调用startTabBasedApp搭建app骨架

Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});

路由跳转

搭好app骨架后，可以调用push api实现路由跳转

this.props.navigator.push({
  screen: 'example.PushedScreen',
  title: 'Pushed Screen'
})

Styling the Tab Bar(自定义Tab Bar)

不管是路由跳转还是startTabBasedApp都有一个tabStyle参数来自定义tab bar

{
  tabBarHidden: false, // 是否隐藏tab bar
  tabBarButtonColor: '#ffff00', // 改变tab bar文字和icon的颜色
  tabBarSelectedButtonColor: '#ff9900', // 改变tab bar选中状态文字和icon的颜色
  tabBarBackgroundColor: '#551A8B', // 改变tab bar 背景颜色
  tabBarTranslucent: false, // 禁用半透明效果
  tabBarTextFontFamily: 'Avenir-Medium', //改变 tab font family
  tabBarLabelColor: '#ffb700', // iOS only. 改变标签文本的颜色
  tabBarSelectedLabelColor: 'red', // iOS only. 改变选中的标签文本的颜色
  forceTitlesDisplay: true, // Android only. 如果值为true，显示所有的标签，否则，只显示选中的便签.
  tabBarHideShadow: true // 是否移除标签栏顶部的阴影
}

screen api

文档

push

pop

popToRoot

resetTo

前言
安装
基本使用
Styling the Tab Bar(自定义Tab Bar)
screen api

学习react-native-navigation v1总结

前言

安装