為了規(guī)范代碼管理，現(xiàn)將app代碼全部放入app文件夾中女仰，操作如下：

開發(fā)環(huán)境配置：http://www.reibang.com/p/970c44cf800e

初始化項目：RNTestProject

react-native init RNTestProject

react-native init RNTestProject --verbose --version 0.22.2 //使用特定版本的react-native依賴初始化項目

創(chuàng)建一個app文件夾和app.js文件围苫，如圖：

創(chuàng)建app文件夾.png

刪掉上圖中默認(rèn)創(chuàng)建的App.js文件磕潮，修改默認(rèn)創(chuàng)建的index.js文件效床，如圖：

原圖.png

修改.png

import App from './app/app.js';

首先給項目集成三方庫react-native-router-flux：http://www.reibang.com/p/68df640242c2

在app.js文件中輸入如下：

import React, { Component } from 'react'
import {
  Platform,
  StyleSheet,
  Text,
  View,
  NativeModules,
  Modal,
  Button,
  Image,
} from 'react-native'
import { Scene, Actions } from 'react-native-router-flux'

import { TabNavigator,TabBarBottom } from 'react-navigation';

import Home from './pages/home/index'
import Category from './pages/category/index'
import ShoppingCart from './pages/shoppingCart/index' 
import Mine from './pages/mine/index'

class Root extends React.Component {
  render() {
    return (
      // <Router scenes={scenes} />
      <MainScreenNavigator />
    )
  }
}

const scenes = Actions.create(
  <Scene key='root'>
    <Scene key='Home' component={Home} title='主頁' />
    <Scene key='Category' component={Category} title='分類' />
    <Scene key='ShoppingCart' component={ShoppingCart} title='購物車' />
    <Scene key='Mine' component={Mine} hideNavBar />
  </Scene>
)

const MainScreenNavigator = TabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: '首頁',
      tabBarIcon: ({ tintColor, focused }) => {
        return  focused ? <Image source={require('./images/home_select.png')}  style={styles.tabBarImage}/> : <Image source={require('./images/home.png')}  style={[styles.tabBarImage,{tintColor: tintColor}]}/>
      }
    }
  },
  Category: {
    screen: Category,
    navigationOptions: {
      tabBarLabel: '分類',
      tabBarIcon: ({ tintColor, focused }) => {
        return focused ? <Image source={require('./images/category_select.png')}  style={styles.tabBarImage}/> : <Image source={require('./images/category.png')}  style={[styles.tabBarImage,{tintColor: tintColor}]}/>
      }
    }
  },
  ShoppingCart: {
    screen: ShoppingCart,
    navigationOptions: {
      tabBarLabel: '購物車',
      tabBarIcon: ({ tintColor, focused }) => {
        return focused ? <Image source={require('./images/shoppingCart_select.png')}  style={styles.tabBarImage}/> : <Image source={require('./images/shoppingCart.png')}  style={[styles.tabBarImage,{tintColor: tintColor}]}/>
      }
    }
  },
  Mine: {
    screen: Mine,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({ tintColor, focused }) => {
        return focused ? <Image source={require('./images/mine_select.png')}  style={styles.tabBarImage}/> : <Image source={require('./images/mine.png')}  style={[styles.tabBarImage,{tintColor: tintColor}]}/>
      }
    }
  }
}, 
{ 
  tabBarComponent:TabBarBottom, // 為了適配安卓添加
  tabBarPosition: 'bottom', // android 默認(rèn)顯示在頂部候引，ios默認(rèn)顯示在底部
  swipeEnabled: false,
  animationEnabled: false,
  showIcon: true, // android 默認(rèn)不顯示 icon, 需要設(shè)置為 true 才會顯示
  tabBarOptions:{
    activeTintColor: '#ffad16', // 選中的顏色
    inactiveTintColor: '#333', // 不選中的顏色
    showIcon: true, // android 默認(rèn)不顯示 icon, 需要設(shè)置為 true 才會顯示
    style: {
      height: 49,           //iPhone X 49 + 34
      paddingBottom: 0,      //iPhone X 34
      backgroundColor: 'white',
      padding: 1,
      // borderTopColor: 'lightgray',
      shadowColor: 'lightgray',
      shadowOffset: {width: 0,  height: 0},
      shadowOpacity: 10,
      shadowRadius: 2,
    },
    labelStyle: {
      fontSize: 11
    },
    tabStyle: { // 設(shè)置底部圖標(biāo)的樣式
      backgroundColor: 'white'
    }
  }
})
// 定義樣式
const styles = StyleSheet.create({
  tabBarImage: {
      width: 24,
      height: 24,
  }
})

export default Root

運行iOS模擬器们童，效果如下圖：

iOS模擬器效果.png

未完待續(xù)...

續(xù)集移步畔况，項目（二）：