TabNavigator是github上开源的一个rn组件，组件地址

TabNavigator使用

1.项目中引入组件 进入项目文件夹：npm install react-native-tab-navigator

截屏2021-06-11 上午10.59.04.png

2.在js文件中引入 import TabNavigator from 'react-native-tab-navigator';

3.创建界面展示文件并引入

import HomePage from './Tab/HomePage';
import ShopCarPage from './Tab/ShopCarPage';
import MinePage from './Tab/MinePage';

4.使用方法

 <TabNavigator
        tabBarStyle={{backgroundColor: 'white', height: 70, color: 'red', paddingBottom:15}}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="首页"
          titleStyle={{marginTop: 1}}
          selectedTitleStyle={{color: 'green'}}
          renderIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_essence_icon.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_essence_click_icon.png')}
            />
          )}
          onPress={() => this.setState({selectedTab: 'home'})}>
          <HomePage navigation={this.props.navigation} />
        </TabNavigator.Item>
</TabNavigator>

title ： Tab 上显示的文字
titleStyle 和 selectedTitleStyle ： 是文字默认与选中时，文字的样式
renderIcon ： Tab上显示的图标（默认图标）
renderSelectedIcon ： 选中的图标
设置图标是要指定组件的宽高，它不会根据图片自动缩放
onPress ：将点击事件和selected属性联系起来

5.完整代码

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

import React, {Component} from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import HomePage from './Tab/HomePage';
import ShopCarPage from './Tab/ShopCarPage';
import MinePage from './Tab/MinePage';

class App extends Component {
  //默认选中首页Tab
  state = {
    selectedTab: 'home',
  };

  render() {
    return (
      <TabNavigator
        tabBarStyle={{backgroundColor: 'white', height: 70, color: 'red', paddingBottom:15}}>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          title="首页"
          titleStyle={{marginTop: 1}}
          selectedTitleStyle={{color: 'green'}}
          renderIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_essence_icon.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_essence_click_icon.png')}
            />
          )}
          onPress={() => this.setState({selectedTab: 'home'})}>
          <HomePage navigation={this.props.navigation} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'profile'}
          title="购物车"
          titleStyle={{marginTop: 1}}
          selectedTitleStyle={{color: 'green'}}
          renderIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_friendTrends_icon.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_friendTrends_click_icon.png')}
            />
          )}
          onPress={() => this.setState({selectedTab: 'profile'})}>
          <ShopCarPage navigation={this.props.navigation} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'one'}
          titleStyle={{marginTop: 1}}
          title="我的"
          selectedTitleStyle={{color: 'green'}}
          renderIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_me_icon.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={{height: 40, width: 40}}
              source={require('./image/tabBar_me_click_icon.png')}
            />
          )}
          onPress={() => this.setState({selectedTab: 'one'})}>
          <MinePage navigation={this.props.navigation} />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}
const styles = StyleSheet.create({});
export default App;