一、配置Tab欄

react-native-tab-navigator

1. 運行yarn add react-native-tab-navigator安裝包

2. 導(dǎo)入 tab 欄組件

   import TabNavigator from 'react-native-tab-navigator'
   

3. 導(dǎo)入 tabbar 的組件頁面

   import Home from './components/tabbar/home'
   import Search from './components/tabbar/search'
   import Cart from './components/tabbar/cart'
   import Me from './components/tabbar/me'
   

4. 使用 TabNavigator 組件創(chuàng)建對應(yīng)的 Tab 欄結(jié)構(gòu)：

    <TabNavigator>
         <TabNavigator.Item
           title="首頁"
           selected={this.state.selectedname === 'home'}
           onPress={() => this.setState({ selectedname: 'home' })}
           // renderIcon={() => <Icon name="home" size={22} />}
           // renderSelectedIcon={() => <Icon name="home" size={22} color="#000" />}
         >
           <Home></Home>
         </TabNavigator.Item>
   
         <TabNavigator.Item
           title="搜索"
           selected={this.state.selectedname === 'search'}
           onPress={() => this.setState({ selectedname: 'search' })}
           // renderIcon={() => <Icon name="search" size={22} />}
           // renderSelectedIcon={() => <Icon name="search" size={22} color="#000" />}
         >
           <Search></Search>
         </TabNavigator.Item>
   
         <TabNavigator.Item
           title="購物車"
           badgeText={0 + ''}
           selected={this.state.selectedname === 'cart'}
           onPress={() => this.setState({ selectedname: 'cart' })}
           // renderIcon={() => <Icon name="shopping-cart" size={22} />}
           // renderSelectedIcon={() => <Icon name="shopping-cart" size={22} color="#000" />}
         >
           <Cart></Cart>
         </TabNavigator.Item>
   
         <TabNavigator.Item
           title="會員"
           selected={this.state.selectedname === 'me'}
           onPress={() => this.setState({ selectedname: 'me' })}
           selectedTitleStyle={{ color: 'red' }}
           // renderIcon={() => <Icon name="user" size={22} />}
           // renderSelectedIcon={() => <Icon name="user" size={22} color="#000" />}
         >
           <Me></Me>
         </TabNavigator.Item>
   
       </TabNavigator>
   

5. 需要在 state 上定義 selectedname來保存當(dāng)前被選中的tab欄：

   constructor() {
       super()
       this.state = {
         selectedname: 'home'
       }
     }
   

   二、配置Tab欄的圖標(biāo)

   注意：使用圖標(biāo)，需要使用 Android SDK Manager 安裝 Android SDK Build-tools 26.0.1 并接收其 license;

   react-native-vector-icons

   1. 運行yarn add react-native-vector-icons安裝包
   2. 運行react-native link,來快速 進(jìn)行相關(guān)的配置；
   3. 打開android/app/build.gradle，定位到第81行，添加如下代碼：

    // 自定義項目用用到的 字體文件
   project.ext.vectoricons = [
       iconFontNames: ['Ionicons.ttf'] // Name of the font files you want to copy
   ]
   
   // 應(yīng)用導(dǎo)入的字體文件
   apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. 當(dāng)做完以上3步之后，我們已經(jīng)手動地修改了安卓的原生代碼，因此不要直接刷新代碼，這樣會報錯；我們需要重新運行react-native run-android命令，進(jìn)行打包編譯，并重新部署到手機(jī)上，進(jìn)行調(diào)試開發(fā)；
5. 字體圖標(biāo)已經(jīng)配置好了，如何用起來呢：

   // 導(dǎo)入 字體圖標(biāo)
   import Icon from 'react-native-vector-icons/Ionicons'
   
   <TabNavigator.Item
           title="首頁"
           selected={this.state.selectedname === 'home'}
           onPress={() => this.setState({ selectedname: 'home' })}
      +    renderIcon={() => <Icon name="home" size={22} color="#900" />}
         >
           <Home></Home>
   </TabNavigator.Item>