React-Native 搭建框架(一) Navicator

一.创建工程

npm nrx use taobao
react-native init project

二.项目结构

项目结构

三.导入 react-native-vector-icons

yarn add react-native-vector-icons
cd ios
pod install
cd ../

下载icon和配置文件
1.创建 resources/font 文件夹

fonts
2.将下载的配置文件 :文件夹 fonts 和 selection.json 移至 fonts 下
3.创建 icon.js,内容如下

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';

const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'timi', 'timi.ttf');
export default Icon;

export const Button = Icon.Button;
export const TabBarItem = Icon.TabBarItem;
export const TabBarItemIOS = Icon.TabBarItemIOS;
export const ToolbarAndroid = Icon.ToolbarAndroid;
export const getImageSource = Icon.getImageSource;

4.添加依赖

yarn add react-navigation
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-navigation-stack
yarn add react-navigation-drawer
yarn add react-navigation-tabs
yarn add react-native-safe-area-context
yarn add @react-native-community/maked-view
Yarn add react-native-vector-icons
cd ios
pod install
cd ..

5.创建 navigator 文件夹和 navigator.js , navigatorUtil.js, tabs.js
navigator.js (创建 tabbar 入口)

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import MainPage from '../pages/main/mainPage';
import WelcomePage from '../pages/welcome/welcomePage';

const InitNavigator = createStackNavigator({
  WelcomePage: {
    screen: WelcomePage,
    navigationOptions: {
      headerShown: false,
    },
  },
});

const MainNavigator = createStackNavigator({
  HomePage: {
    screen: MainPage,
    navigationOptions: {
      headerShown: false,
    },
  },
});

export default createAppContainer(
  createSwitchNavigator(
    {
      Welcome: InitNavigator,
      Main: MainNavigator,
    },
    {
      navigationOptions: {
        headerShown: false,
      },
    },
  ),
);

tabs.js (创建和配置 tabs)

import React, {Component} from 'react';
import discoverPage from '../pages/discover/discoverPage';
import profilePage from '../pages/profile/profilePage';
import storePage from '../pages/store/storePage';
import carPage from '../pages/car/carPage';
import servicePage from '../pages/service/servicePage';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import TimiIcon from '../../resources/fonts/icon';
import global from '../common/GlobalContants';
import {Image, View} from 'react-native';
const tabs = {
  DiscoverPage: {
    screen: discoverPage,
    navigationOptions: {
      tabBarLabel: '探索',
      tabBarIcon: ({tintColor, focused}) => (
        <TimiIcon name="tab_discover" size={24} color={tintColor} />
      ),
    },
  },

  StorePage: {
    screen: storePage,
    navigationOptions: {
      tabBarLabel: '商城',
      tabBarIcon: ({tintColor, focused}) => (
        <TimiIcon name="tab_store" size={24} color={tintColor} />
      ),
    },
  },

  CarPage: {
    screen: carPage,
    navigationOptions: {
      tabBarLabel: '车辆',
      tabBarIcon: ({tintColor, focused}) => (
        <TimiIcon name="tab_car" size={24} color={tintColor} />
      ),
    },
  },

  ServicePage: {
    screen: servicePage,
    navigationOptions: {
      tabBarLabel: '服务',
      tabBarIcon: ({tintColor, focused}) => (
        <TimiIcon name="tab_service" size={24} color={tintColor} />
      ),
    },
  },
  ProfilePage: {
    screen: profilePage,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({tintColor, focused}) => (
        <TimiIcon name="tab_profile" size={24} color={tintColor} />
      ),
    },
  },
};
export default class Tabbar extends Component {
  constructor(props) {
    super(props);
    console.disableYellowBox = true;
  }
  _getTabs() {
    const {DiscoverPage, StorePage, CarPage, ServicePage, ProfilePage} = tabs;
    const TAB = {DiscoverPage, StorePage, CarPage, ServicePage, ProfilePage};
    const TABBAR = createAppContainer(
      createBottomTabNavigator(TAB, {
        tabBarOptions: {
          activeTintColor: global.gColors.theme,
        },
      }),
    );
    return <TABBAR />;
  }
  render() {
    return this._getTabs();
  }
}

navigatorUtil.js (导航工具类)

export default class NavigatorUtil {
  static resetHomePage(params) {
    const {navigation} = params;
    navigation.navigate('Main');
  }
}

6.修改 index.js 入口为 tabbar

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import AppNavigator from './js/navigator/navigator';
AppRegistry.registerComponent(appName, () => AppNavigator);

备注: common 文件夹下 工具类 GlobalContants.js

/**
 * Created by oujinlong on 2018/12/10.
 */
import {Dimensions, Platform, PixelRatio, NativeModules} from 'react-native';
import {Header} from 'react-navigation-stack';

global.isIOS = Platform.OS === 'ios' ? true : false;

const {StatusBarManager} = NativeModules;

global.gScreen = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  navBarHeight: 64,
  navBarPaddingTop: 20,
  onePix: 1 / PixelRatio.get(),
  statusBarHeight: Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT,
  navigationBarHeight:
    Header.HEIGHT + (Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT),
  containerHeight:
    Dimensions.get('window').height -
    (Header.HEIGHT + (Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT)) -
    (Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT),
};

global.gColors = {
  theme: '#63b4c4',
  background: '#f5f5f5',
  border: '#d5d5d5',
  btnDisabled: '#d5d5d5',
};

export default global;