学习react-native-navigation v1总结

作者 likaiqiang 日期 2018-12-08
学习react-native-navigation v1总结

前言

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

安装

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

android

ios

需要注意的是,整个项目安卓的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