reactnative项目（一）

为了规范代码管理，现将app代码全部放入app文件夹中，操作如下：

开发环境配置：https://www.jianshu.com/p/970c44cf800e

初始化项目：RNTestProject

react-native init RNTestProject

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

创建一个app文件夹和app.js文件，如图：

创建app文件夹.png

删掉上图中默认创建的App.js文件，修改默认创建的index.js文件，如图：

原图.png
修改.png

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

首先给项目集成三方库react-native-router-flux：https://www.jianshu.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 默认显示在顶部，ios默认显示在底部
  swipeEnabled: false,
  animationEnabled: false,
  showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
  tabBarOptions:{
    activeTintColor: '#ffad16', // 选中的颜色
    inactiveTintColor: '#333', // 不选中的颜色
    showIcon: true, // android 默认不显示 icon, 需要设置为 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: { // 设置底部图标的样式
      backgroundColor: 'white'
    }
  }
})
// 定义样式
const styles = StyleSheet.create({
  tabBarImage: {
      width: 24,
      height: 24,
  }
})

export default Root

运行iOS模拟器，效果如下图：

iOS模拟器效果.png

未完待续...

续集移步，项目（二）：