React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator

icon第三方庫
yarn add react-native-vector-icons
react-native link react-native-vector-icons 

在上次的代碼中添加：

AppNavigators.js

import React from 'react'; //只要在頁面中使用了基礎組件 都需要導入這句話 不然會報錯
import {Button,Platform} from 'react-native';
import { createStackNavigator,createAppContainer,createBottomTabNavigator,createMaterialTopTabNavigator } from 'react-navigation';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';
import Ionicons from 'react-native-vector-icons/Ionicons'

const AppTopNavigator=createMaterialTopTabNavigator(
  {
  Page1:{
     screen:Page1,
     navigationOptions:{
       tabBarLabel: 'All'
     }
  },
  Page2:{
     screen:Page2,
     navigationOptions:{
       tabBarLabel: 'iOS'
     }
  },
  Page3:{
     screen:Page3,
     navigationOptions:{
       tabBarLabel: 'Android'
     }
  },
  Page4:{
     screen:Page4,
     navigationOptions:{
       tabBarLabel: 'React-Native'
     }
  },
},
  {
  tabBarOptions:{
    tabStyle:{mindWidth: 50},
    upperCaseLabel:false,//是否使標簽大寫 默認true
    scrollEndabled:true,//是否支持選項卡滾動 默認false
    style:{
      backgroundColor:'#678'//TabBar背景色
    },
    indicatorStyle:{
      height:2,
      backgroundColor:'white'
    },//標簽指示器樣式
    labelStyle:{
      fontSize:13,
      marginTop:6,
      marginBottom:6
    },// 文字的樣式


  }
}
);


const AppBottomNavigator=createBottomTabNavigator(
  {
    Page1:{
       screen:Page1,
       navigationOptions:{
         tabBarLabel: '最熱',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-home'}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page2:{
       screen:Page2,
       navigationOptions:{
         tabBarLabel: '趨勢',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-appstore'} // 全部小寫
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page3:{
       screen:Page3,
       navigationOptions:{
         tabBarLabel: '收藏',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-people'}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page4:{
       screen:Page4,
       navigationOptions:{
         tabBarLabel: '我的',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-aperture'}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
  },
  {
    tabBarOptions:{
      activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
    }
  }
);


const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}頁面名`//動態設置navigationOptions
        })
    },
    Page2: {
        screen: Page2,
        navigationOptions: {//在這里定義每個頁面的導航屬性，靜態配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在這里定義每個頁面的導航屬性，動態配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '編輯'}
                        onPress={()=>{setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                            }
                    />
                ),
            }
        }
    },

    Bottom:{
      screen:AppBottomNavigator,
      navigationOptions:{
        title:'BottomNavigator'
      }
    },

    Top:{
      screen:AppTopNavigator,
      navigationOptions:{
        title:'TopNavigator'
      }
    }

},
 {
    defaultNavigationOptions: {
        // header: null,// 可以通過將header設為null 來禁用StackNavigator的Navigation Bar
    }
  }
);

const App = createAppContainer(AppStackNavigator)
export default App

HomePage.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

 import React, {Fragment,Component} from 'react';
 import {
   StyleSheet,
   View,
   Text,
   Button,
 } from 'react-native';
type Props = {};
 export default class HomePage extends Component<Props> {

   //修改Back按鈕
   static navigationOptions={
     title:'Home',
     headerBackTitle:'返回哈哈'
   }
   render(){
     const {navigation}=this.props;

     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>歡迎來到HomePage</Text>

         <Button
           title={'去 Page1'}
           onPress={()=>{
             navigation.navigate('Page1',{name:'動態的'});
           }}
         />

         <Button
           title={'去 Page2'}
           onPress={()=>{
             navigation.navigate('Page2');
           }}
         />

         <Button
           title={'去 Page3'}
           onPress={()=>{
             navigation.navigate('Page3',{name:'Dev iOS'});
           }}
         />

         <Button
           title={'去 Bottom Navigator'}
           onPress={()=>{
             navigation.navigate('Bottom');
           }}
         />

         <Button
           title={'去 Top Navigator'}
           onPress={()=>{
             navigation.navigate('Top');
           }}
         />

       </View>
       );
   }
 }

 const styles=StyleSheet.create({
   container:{
     flex:1,
   },
   welcome:{
     fontSize:20,
     textAlign: 'center',
   }

 });

效果圖

 

https://zamarrowski.github.io/react-ionicons/ 圖標網址

https://reactnavigation.org/docs/en/tab-based-navigation.html 導航欄指導文檔

 

--------------------------分界線--------------------------

如果AppNavigators.js做如下配置，那么每個Page都能擁有底部切換Bar了 

import React from 'react'; //只要在頁面中使用了基礎組件 都需要導入這句話 不然會報錯
import {Button} from 'react-native';
import { createStackNavigator,createAppContainer,createBottomTabNavigator } from 'react-navigation';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';
import Ionicons from 'react-native-vector-icons/Ionicons'


const AppBottomNavigator=createBottomTabNavigator({
  Page1:{
       screen:Page1,
       navigationOptions:{
         tabBarLabel: '最熱',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-home'}
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
    Page2:{
       screen:Page2,
       navigationOptions:{
         tabBarLabel: '趨勢',
         tabBarIcon:({tintColor,focused})=>(<Ionicons
            name={'ios-appstore'} // 全部小寫
            size={26}
            style={{color:tintColor}}
         />)
       }
    },
}

);

//HomePage Page1 Page2 這些是頁面名，到時候導航器就接收這個參數進行界面跳轉
const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: AppBottomNavigator,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}頁面名`//動態設置navigationOptions
        })
    },
    Page2: {
        screen: AppBottomNavigator,
        navigationOptions: {//在這里定義每個頁面的導航屬性，靜態配置
            title: "This is Page2.",
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在這里定義每個頁面的導航屬性，動態配置
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '編輯'}
                        onPress={()=>{setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                            }
                    />
                ),
            }
        }
    },
    Bottom:{
      screen:AppBottomNavigator,
      navigationOptions:{
        title:'BottomNavigator'
      }
    },

}, {
    defaultNavigationOptions: {
        // header: null,// 可以通過將header設為null 來禁用StackNavigator的Navigation Bar
    }
});


const App = createAppContainer(AppStackNavigator)
export default App