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

最新推荐文章于 2023-01-12 10:37:21 发布

weixin_33834075

最新推荐文章于 2023-01-12 10:37:21 发布

阅读量239

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b3c96e36fb9a04fa560beaf

本文介绍如何使用 createBottomTabNavigator 替代过时的 TabNavigator，并通过具体示例展示了如何配置底部标签导航，包括设置初始界面、标签颜色及样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一开始使用 组件: 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,
   },
});
复制代码