一.創(chuàng)建工程
npm nrx use taobao
react-native init project
二.項目結(jié)構(gòu)
三.導(dǎo)入 react-native-vector-icons
yarn add react-native-vector-icons
cd ios
pod install
cd ../
下載icon和配置文件
1.創(chuàng)建 resources/font 文件夾
2.將下載的配置文件 :文件夾 fonts 和 selection.json 移至 fonts 下
3.創(chuàng)建 icon.js,內(nèi)容如下
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.創(chuàng)建 navigator 文件夾和 navigator.js , navigatorUtil.js, tabs.js
navigator.js (創(chuàng)建 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 (創(chuàng)建和配置 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: '服務(wù)',
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 (導(dǎo)航工具類)
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;