ReactNative中React-navigation嵌套使用

首先需要在终端输入install命令安装react-navigation，以及link本地依赖关系：

npm install --save react-navigation
react-native link react-native-gesture-handler

下面实现的是StackNavigator嵌套底部导航BottomTabNavigator

新建一个js文件RouterConfig，在其中创建两个导航并且路由每个导航对应的页面，代码如下：

import React, { Component } from 'react';
import {
    Text,
    Image,
    View,
    StyleSheet,
} from 'react-native';
import {
    createAppContainer,
    createStackNavigator,
    createBottomTabNavigator,
} from 'react-navigation';
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";
import Home from "./Home";
import Mine from "./Mine";
import { Icon } from 'native-base';

//新建BottomNavigator
const AppBottomNavigator = createBottomTabNavigator({
    Home:{
        screen:createStackNavigator({
                Home:{
                    screen:Home,
                    navigationOptions:({navigation})=>({
                        truncatedTitle:'首页',
                        //头部标题相关配置
                        headerLeft:(
                            <Image source={require('../res/img_msg.png')} style={{width:30,height:30,margin:5}}/>
                        ),
                        headerTitle:(
                            <View style={{justifyContent:'center',alignItems:'center'}}>
                                <Text style={styles.textInput} onPress={()=>navigation.navigate('Page1')}>请输入搜索内容</Text>
                            </View>
                        ),
                        headerStyle:({elevation: 0, backgroundColor: '#fed725',height:50}),
                        headerRight:(
                            <Image source={require('../res/img_qrcode.png')} style={{width:25,height:25,margin:5}}/>
                        )
                    })
                }
            }),
        navigationOptions:{
            tabBarLabel:'首页',
            tabBarIcon:({focused})=>(
                <TabBarIcon focused={focused} name={'apps'} color={focused?'#FF0000':'#000'}/>
            )
        }
    },
    Mine:{
        screen:Mine,
        navigationOptions:{
            tabBarLabel:'我的',
            tabBarIcon:({focused})=>(
                <TabBarIcon focused={focused} name={'apps'} color={focused?'#FF0000':'#000'}/>
            )
        }
    },
});

//创建StackNavigator
const AppNavigator = createStackNavigator({
        //Tab路由的是上面创建的BottomNavigator
        Tab:{
            screen:AppBottomNavigator,
            navigationOptions:{
                header:null,
            }
        },
        Page1 :{
            screen:Page1,
            navigationOptions:{
                header:null,
            }
        },
        Page2 :{
            screen:Page2,
        },
        Page3 :{
            screen:Page3,
        },
    },{
        //设置默认页面
        initialRouteName: "Tab",
    },
);

export default createAppContainer(AppNavigator);

class TabBarIcon extends Component{
    render(){
        return(
            <Icon
                name={this.props.name}
                style={{fontSize:24,color:this.props.color}}
            />
        )
    }
}

const styles = StyleSheet.create({
    textInput:{
        backgroundColor: '#ffffff',
        borderRadius:10,
        width:300,
        height:30,
        padding:5,
        textAlign: 'center',
    }
});

App.js中渲染创建的导航：

export default class App extends Component {
    render() {
        return (
            <AppNavigator />
        );
    }
}

index.js中注册上面创建的App

AppRegistry.registerComponent(appName, () => App);

我自己把这个的实现效果理解成原生开发中Activity中嵌套Fragment，在主Activity中可以单击导航切换Fragment，也可以通过一些事件打开跳转其他的Activity。