react-native——tab配置及跳轉

在 App 中 tab 是常見的頁面類型，在 RN 里使用 react-navigation 可快速地進行 tab 配置。

假設應用有4個頁面，兩個是tab頁面，兩個是詳情頁面。

App.js

//應用實際場景是有redux的，這里就不刪除了。不使用rudex的話，直接 return <Router />就 ok 啦！
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import configureStore from './store';
import Router from './router';

let store = configureStore();

export default class App extends Component {
  render() {
    return (
      <Provider store={store.store} style={{ flex: 1 }}>
        <PersistGate persistor={store.persistor}>
          <Router />
        </PersistGate>
      </Provider>
    );
  }
};

router.js

import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import React from 'react';
import { Image } from 'react-native';

import Index from './view/index';
import Center from './view/center';
import Detail1 from './view/detail1';
import Detail2 from './view/detail2';

const TabNavigator = createBottomTabNavigator({
    Index: {
        screen: Index,
        navigationOptions: {
            title: '首頁'
        }
    },
    Center: {
        screen: Center,
        navigationOptions: {
            title: '我的'
        }
    },
}, tabBarConfig);

const AppNavigator = createStackNavigator({
    Tab: TabNavigator,
    Detail1: Detail1
    Detail2: Detail2
}, { headerMode: 'none' });//刪除每個頁面的頭（一般使用自定義的）

export default createAppContainer(AppNavigator);

const tabBarConfig = { //tab的一些配置
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, horizontal, tintColor }) => {//處理tab icon
            const { routeName } = navigation.state;
            let iconUrl;
            switch (routeName) {
                case 'Center':
                    iconUrl = focused ? require('./assets/imgs/me-full.png') : require('./assets/imgs/me.png');
                    break;
                default:
                    iconUrl = focused ? require('./assets/imgs/mv-full.png') : require('./assets/imgs/mv.png');
                    break;
            }
            return <Image source={iconUrl} style={{ width: 25, height: 25 }} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: '#fd0',
        inactiveTintColor: '#666',
        labelStyle: {
            fontSize: 14
        },
        style: {
            backgroundColor: '#fafafa',
        }
    }
}

應用中，跳轉非tab頁面，建議使用push跳轉，跳轉tab建議使用navigate進行跳轉。

<Text onPress={() => this.props.navigation.navigate('Center')}>跳轉Center</Text>
<Text onPress={() => this.props.navigation.push('Detail1')}>跳轉Detail</Text>