React native 之TabBar搭建--组件: createBottomTabNavigator

1,376 阅读1分钟

一开始使用 组件: TabNavigator 后, 切换组件的时候一直报警高:

warning Method 'jumpToIndex' is deprecated. Please upgrade your code to use jumpTo instead 'Change your code from 'jumpToIndex(1)' to 'jumpTo('...')

最后换成 组件:createBottomTabNavigator

createBottomTabNavigator使用:

import { createBottomTabNavigator } from 'react-navigation';
// 自定义组件
import FSHome from '../../Component/Home/FSHome';
import FSShops from '../../Component/Shops/FSShops';

 export default class FSMain extends Component {
      render() {
         return (
             <BottomTabNavigator />
         );
      }
}

const BottomTabNavigator = createBottomTabNavigator(
    {
       Home: {
          screen: FSHome,
          navigationOptions: {
             tabBarLabel: "首页",
             tabBarIcon: ({focused, tintColor}) => (
                 <Image
                     source={focused? {uri:"icon_tabbar_homepage_selected"} :                                                 {uri:"icon_tabbar_homepage"}}
                     style={styles.tabBarIconStyle}
                 />
             ),
          },
       },

       Shops: {
          screen: FSShops,
          navigationOptions: {
             tabBarLabel: "商家",
             tabBarIcon: ({focused, tintColor}) => (
                 <Image
                     source={focused? {uri:"icon_tabbar_merchant_selected"} :                                                 {uri:"icon_tabbar_merchant_normal"}}
                     style={styles.tabBarIconStyle}
                 />
             )
          }
       },
    },

    {
       // 初始化哪个界面为显示的第一个界面,如果不配置,默认使用RouteConfigs中的第一个页面当做根界面
       initialRouteName: "Home",
       lazy: true,
       tabBarOptions: {
          inactiveTintColor: "#8F8F8F",
          activeTintColor: "#ED5601",
          labelStyle: {
             fontSize: 11
          }
       }
    }
);

const styles = StyleSheet.create({

   tabBarIconStyle: {
      width: 30,
      height: 30,
   },
});

备注: 尚未添加导航栏。 等待下一期!!!