底部Tab結(jié)構(gòu)+側(cè)滑菜單結(jié)構(gòu)，可自行選擇

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;
}
};

此處創(chuàng)建的是帶抽屜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', // 初始化哪個(gè)界面為根界面
  mode: 'card', // 跳轉(zhuǎn)方式：默認(rèn)的card菩浙，在iOS上是從右到左跳轉(zhuǎn)巢掺，在Android上是從下到上，都是使用原生系統(tǒng)的默認(rèn)跳轉(zhuǎn)方式劲蜻。
  headerMode:'screen', // 導(dǎo)航條動(dòng)畫效果：float表示會(huì)漸變陆淀，類似于iOS的原生效果，screen表示沒有漸變先嬉。none表示隱藏導(dǎo)航條
  navigationOptions: {
    gesturesEnabled: false, //是否可以使用手勢(shì)關(guān)閉此屏幕轧苫。在iOS上默認(rèn)為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兩個(gè)Tab 是不同形式的含懊，一個(gè)文本形式，一個(gè)圖片形式 **/
    Center: {
        screen: CenterScreen,
        navigationOptions: {
            //此處tabBarVisible表示是否顯示當(dāng)前的tab選項(xiàng)
            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,
    //是否可以滑動(dòng)切換
    swipeEnabled: false,
    //切換是否有動(dòng)畫
    animationEnabled: true,
    //進(jìn)入App的首頁面
    initialRouteName: 'Home',
    //對(duì)于導(dǎo)航的設(shè)置
    tabBarOptions: {
        activeTintColor: '#17A9DF',
        inactiveTintColor: '#B4B4B4',
        //android特有下劃線的顏色1
        indicatorStyle: {height: 0},
        //文字的樣式
        labelStyle: {
            fontSize: 10,
            paddingBottom: 10
        },
        //對(duì)于導(dǎo)航的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 放置彈出的抽屜內(nèi)容
    contentComponent: props => {
        return <ControlPane {...props}/>;
    }
})