TabNavigator的使用 定義一個整體的tab屬性

import {TabNavigator,StackNavigator,TabBarBottom} from 'react-navigation'

const MyTab = TabNavigator({Home: {screen: Main,navigationOptions: ({navigation}) => ({  tabBarLabel:'主頁'  }),  },Manage: {screen: UserManage,navigationOptions: ({navigation}) => ({  tabBarLabel:'管理'  }),  },Today: {screen: UserToday,navigationOptions: ({navigation}) => ({  tabBarLabel:'今日'  }),  }
}, {tabBarComponent:TabBarBottom,，animationEnabled: false, // 切換頁面時是否有動畫效果tabBarPosition: 'bottom', // 顯示在底端，android 默認是顯示在頁面頂端的swipeEnabled: true, // 是否可以左右滑動切換tabbackBehavior: 'none', // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉lazy:true, tabBarOptions: {activeTintColor: '#ff8500', // 文字和圖片選中顏色inactiveTintColor: '#999', // 文字和圖片未選中顏色showIcon: false, // android 默認不顯示 icon, 需要設置為 true 才會顯示
        indicatorStyle: {height: 0  // 如TabBar下面顯示有一條線，可以設高度為0后隱藏
        }, style: {backgroundColor: '#fff', // TabBar 背景色// height: 30
        },labelStyle: {fontSize: 20, // 文字大小
        },},
});
Main、UserManage、UserToday是react組件

tabBarComponent:TabBarBottom //這一條一定要加，不加跳轉有卡頓，TabBarBottom引用自react-navgition

// 渲染返回定義好的tab
render(){return(<MyTab/>)
}

?

?

?

轉載于:https://www.cnblogs.com/insight0912/p/7772831.html

總結

以上是生活随笔為你收集整理的react-navigation的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。