rn-project
Version:
#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础,简单,可维护的 适配我司的react-native项目。可在此基础上搭建项目,封装了基础架构,基础组件,以及各种交互等;可快速进行项目搭建,开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux
99 lines (87 loc) • 2.7 kB
JavaScript
import React from 'react';
import { AsyncStorage } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import { Image } from 'react-native';
import BaseStyle from './constants/Style';
import HomeScreen from './pages/home';
import MineScreen from './pages/mine';
const getIcon = type => {
switch (type) {
case 'Home':
return require('./images/home/home.png');
case 'Home-focused':
return require('./images/home/home_1.png');
case 'Mine':
return require('./images/home/mine.png');
case 'Mine-focused':
return require('./images/home/mine_1.png');
}
};
export default createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: () => ({
title: '首页',
}),
},
Mine: {
screen: MineScreen,
navigationOptions: () => ({
title: '我的',
tabBarOnPress: async obj => {
const { navigation, defaultHandler } = obj;
//在这里控制登录跳转
const userData = await AsyncStorage.multiGet(['token', 'userId']);
if (userData[0][1] && userData[1][1]) {
//登录状态下
defaultHandler();
} else {
global.token = '';
global.userId = '';
navigation.navigate('LoginScreen');
}
},
}),
},
},
{
initialRouteName: 'Home',
/* eslint-disable */
// 这里暂时不做代码风格校验 后面按需剥离出来
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ tintColor, focused }) => {
const { routeName } = navigation.state;
let iconName
if (routeName === 'Home') {
iconName = focused ? getIcon(`${routeName}-focused`) : getIcon(routeName);
} else if (routeName === 'Mine') {
iconName = focused ? getIcon(`${routeName}-focused`) : getIcon(routeName);
}
return (
<Image
source={iconName}
style={{ width: 20, height: 20 }}
/>
);
},
}),
/* eslint-disable */
tabBarOptions: {
activeTintColor: BaseStyle.primaryColor.color, // 文字和图片选中颜色
// inactiveTintColor: '#999999', // 文字和图片未选中颜色
// showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
// indicatorStyle: {
// height: 0 // 如TabBar下面显示有一条线,可以设高度为0后隐藏
// },
style: { //整个tab样式设置
backgroundColor: '#fff',
borderTopWidth: 0,
height: 49
},
labelStyle: {
fontSize: 14,
},
},
},
);