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

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

备注：尚未添加导航栏。 等待下一期!!! 我会先在 掘金 网上发布。 后期也会逐步转到 掘金。伙伴们可以关注下，一同学习React native
作者：蜗居小生
链接：https://juejin.im/user/5b30ff23e51d4558cf6e8e52/posts