底部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}>&#xe664;</Text> : <Text style={styles.renderIcon}>&#xe663;</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}/>;
    }
})