React-Native 搭建框架(一) Navicator

2021-06-15 React-native 15

一.创建工程
```
npm nrx use taobao
react-native init project
```
二.项目结构
![项目结构](https://upload-images.jianshu.io/upload_images/9030742-19c74bb38c56f3a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

三.导入 react-native-vector-icons
```
yarn add react-native-vector-icons
cd ios
pod install
cd ../
```
[下载icon和配置文件](https://icomoon.io/app)
1.创建 resources/font 文件夹
![fonts](https://upload-images.jianshu.io/upload_images/9030742-311c66963c5f374f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
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;

```

发布评论

© 欧大 All Rights Reserved

Theme by WordPress