功能:
使用React-native-tab-navigator(https://github.com/exponentjs/react-native-tab-navigator) 实现底部选项卡切换
实现效果:
实现过程:
1、项目集成react-native-tab-navigator
在项目根目录下,运行:npm install react-native-tab-navigator –-save
2、核心代码:
App.js代码
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,StatusBar,Image} from 'react-native';
import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation'
import color from './widget/color'
import TabBarItem from './widget/TabBarItem'
import HomeScene from './scene/Home/HomeScene'
import MineScene from './scene/Mine/MineScene'
const lightContentScenes = ['Home', 'Mine']
function getCurrentRouteName(navigationState: any) {
if (!navigationState) {
return null
}
const route = navigationState.routes[navigationState.index]
// dive into nested navigators
if (route.routes) {
return getCurrentRouteName(route)