底部Tab结构+侧滑菜单结构，可自行选择
1、root.js (src/root.js)
import React from 'react';
import {AppRegistry} from 'react-native';
import {Provider} from 'react-redux';
import configureStore from './store/store';
import {AppNavigator} from './routes/routers';
const store = configureStore();
export default class Root extends React.Component{
render(){
return(
<Provider store={store}>
<AppNavigator/>
</Provider>
)
}
}
/**此处appName 自行定义**/
AppRegistry.registerComponent(appName, () => Root);
2、store.js (src/store/store.js)
'use strict';
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';
//此处的http文件可自行配置
import http from '../middlewares/http';
import {navMiddleware} from '../routes/routers';
const middelwares = [];
middelwares.push(http);
middelwares.push(thunkMiddleware);
middelwares.push(navMiddleware);
if (process.env.NODE_ENV === 'development') {
middelwares.push(createLogger());
}
const createStoreWithMiddleware = applyMiddleware(...middelwares)(createStore);
export default function configureStore(initialState) {
const store = createStoreWithMiddleware(rootReducer, initialState);
return store;
}
3、index.js (src/reducers/index.js)
import { combineReducers } from 'redux'
import app from './app';
const AppReducer = combineReducers({
app,
//...此处添加需要加入的
});
export default AppReducer
4、app.js (src/reducers/app.js)
import Immutable from 'immutable';
const initState = Immutable.fromJS({
});
export default (state = initState, action) => {
let newState = state;
switch (action.type) {
default:
return newState;
}
};
此处创建的是带抽屉Drawer嵌套底部TabBar的框架，可以自行修改框架的形式
5、routers.js (src/routes/routers.js)
import {connect} from 'react-redux';
import {
createStackNavigator,
} from 'react-navigation';
import {
reduxifyNavigator,
createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';
import SplashScreen from '../splashPage';
import DrawerScreen from './drawerPage';
const navMiddleware = createReactNavigationReduxMiddleware(
'root',
state => state.nav
);
const StackNavigatorConfigs = {
initialRouteName: 'Splash', // 初始化哪个界面为根界面
mode: 'card', // 跳转方式：默认的card，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。
headerMode:'screen', // 导航条动画效果：float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
navigationOptions: {
gesturesEnabled: false, //是否可以使用手势关闭此屏幕。在iOS上默认为true，在Android上为false
},
};
const StackRouteConfigs = {
Splash: {
screen: SplashScreen,
navigationOptions: {
header: null
}
},
/*此处的DrawerScreen可替换成任意的形式,例如tabBar形式*/
Main: {
screen: DrawerScreen,
navigationOptions: {
header: null
}
},
};
const RootNavigator = createStackNavigator(StackRouteConfigs, StackNavigatorConfigs);
const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');
const mapStateToProps = state => ({
state: state.nav,
});
const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);
export {RootNavigator, AppNavigator, navMiddleware};
6、tabBar.js (src/routes/tabBar.js)
import React from 'react';
import {
TouchableOpacity,
Image,
View,
StyleSheet,
Dimensions,
Platform,
Text,
} from 'react-native';
import {
createBottomTabNavigator,
} from "react-navigation";
import CenterIcon from '../../assets/imgs/tabBar/center.png';
import SelectCenterIcon from '../containers/center/selectcenter.png';
import HomeScreen from '../containers/home/home';
import CenterScreen from '../containers/center/center';
const {width,height} = Dimensions.get('window');
const styles = StyleSheet.create({
pressedIcon: {
fontFamily: 'iconfont',
fontSize: 20,
color: '#17A9DF',
marginTop: 10,
},
renderIcon: {
fontFamily: 'iconfont',
fontSize: 20,
color: '#B4B4B4',
marginTop: 10,
}
});
export default Tab = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarPosition: 'bottom',
tabBarLabel: 'Home',
showLabel: false,
tabBarIcon: ({tintColor, focused}) => (
focused ? <Text style={styles.pressedIcon}></Text> : <Text style={styles.renderIcon}></Text>
),
}
},
/**此处的Home和Center两个Tab 是不同形式的，一个文本形式，一个图片形式 **/
Center: {
screen: CenterScreen,
navigationOptions: {
//此处tabBarVisible表示是否显示当前的tab选项
tabBarVisible: false,
tabBarPosition: 'bottom',
tabBarLabel: 'Center',
showLabel: false,
tabBarIcon: ({tintColor, focused}) => (
focused ? <Image source={SelectCenterIcon} style={{marginBottom:25}}/> :<Image source={CenterIcon} style={{marginBottom:25}}/>
),
}
},
}, {
animationEnabled: true,
swipeEnabled: false,
//是否可以滑动切换
swipeEnabled: false,
//切换是否有动画
animationEnabled: true,
//进入App的首页面
initialRouteName: 'Home',
//对于导航的设置
tabBarOptions: {
activeTintColor: '#17A9DF',
inactiveTintColor: '#B4B4B4',
//android特有下划线的颜色1
indicatorStyle: {height: 0},
//文字的样式
labelStyle: {
fontSize: 10,
paddingBottom: 10
},
//对于导航的stytles
style :{
borderTopColor: 'rgba(0,0,0,0.2)',
borderTopWidth: 1,
backgroundColor: '#ffffff',
}
}
});
7、drawer.js (src/routes/drawer.js)
import React from 'react';
import {
StyleSheet,
Dimensions,
Platform,
Text,
TouchableOpacity,
Image,
View
} from 'react-native';
import {
createDrawerNavigator,
} from "react-navigation";
import ControlPane from '../containers/controlPane/controlPane';
import TabBar from './tabBar';
const {width,height} = Dimensions.get('window');
export default Drawer = createDrawerNavigator({
TabBar: {
screen: TabBar,
navigationOptions: {
header: null
}
},
},
{
//drawerPosition 可控制该抽屉是否弹出的方向
drawerPosition:'left',
drawerWidth: width * 0.8,
//drawerLockMode 可控制该抽屉是否锁定
drawerLockMode:'locked-closed',
useNativeAnimations:true,
//contentComponent 放置弹出的抽屉内容
contentComponent: props => {
return <ControlPane {...props}/>;
}
})
