RN路由stackNavigator以及TabNavigator

简单的小案例。在首页上有选项卡和页面跳转的功能。从首页跳到第二个页面，第二个页面可以跳转到第三四个页面

参考网站 https://reactnavigation.org/docs/navigators/stack

1.index.android.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Button,
} from 'react-native';
import Tab from './tab';
import Stack from './src/Stack/StackNavigator';
import TabNavigator from  './src/Stack/TabNavigator';
export default class Login extends Component {
  render() {
    return (   
        <TabNavigator/>
    );
  }
}
AppRegistry.registerComponent('Login', () => Login);

2.TabNavigator.js

 import React, { Component } from 'react';
import {
   AppRegistry,
   StyleSheet,
   View,
   Text,
   Button,
   Image
} from 'react-native';
import {TabNavigator,StackNavigator } from 'react-navigation';
import Two from './Two';
class MyHomeScreen extends Component {
   static navigationOptions = {
       tabBarLabel: '首页',
       tabBarIcon: ({tintColor})=>(
           <Image
               source={require('../logo.png')}
               style={[style.icon, {tintColor: tintColor}]}
           />
       ),
       header:null
   };
   render() {
       return (
           <View>
               <Text>第一个页面</Text>
               <Button
                   onPress={()=>this.props.navigation.navigate('Two')}
                   title="去第二个页面"
               />
           </View>

       );
   };
}
class MyNotificationsScreen extends Component{
   static  navigationOptions={
       tabBarLabel:'通知页',
       tabBarIcon:({tintColor})=>(
           <Image
               source={require('../logo.png')}
               style={[styles.icon,{tintColor:tintColor}]}
           />
       ),
       header:null
   };
   render(){
       return(
           <Text>通知页</Text>
       );
   }
}
const styles=StyleSheet.create({
   icon:{
       width:26,
       height:26,
   }
});

const MyApp=TabNavigator({
   Home:{screen:MyHomeScreen},
   Notifications:{screen:MyNotificationsScreen},
},{
   tabBarOptions:{
       activeTintColor:'#e91e63',
   },
   header:'null'
});
const SimpleApp=StackNavigator({
   Home:{screen:MyApp},
   Two:{screen:Two}
});
module.exports=SimpleApp;

2. Two.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    Button,
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Home from './TabNavigator';
class Two extends Component {
    static navigationOptions={
        header:null
    };
    render() {
        return (
            <View>
                <Text>第二个页面</Text>
                <Button
                  onPress={()=>this.props.navigation.navigate('Home')}
                  title="返回"
                />
                <Button
                    onPress={()=>this.props.navigation.navigate('Three')}
                    title="去第三个页面"
                />
                <Button
                  onPress={()=>this.props.navigation.navigate('Four')}
                  title="去第四个页面"
                />
            </View>
        );
    }
}
class Three extends Component {
    static navigationOptions={
        header:null
        // mode:'card',
    };
    render() {
        return (
            <View style={{flex:1,}}>
                <Button
                  onPress={()=>this.props.navigation.goBack()}
                  title="返回"
                />
                <Text>第三个页面</Text>
            </View>
        );
    }
}
class Four extends Component {
    static navigationOptions={
        header:null
        // mode:'card',
    };
    render() {
        return (
            <View style={{flex:1,}}>
                <Button
                    onPress={()=>this.props.navigation.goBack()}
                    title="返回"
                />
                <Text>第四个页面</Text>
            </View>
        );
    }
}
const MyApp=StackNavigator({
   Two:{screen:Two},
    Three:{screen:Three},
    Four:{screen:Four}
});
module.exports=MyApp;

以上代码就是一个简单的小demo。因为刚学习，可能有很多地方写的不是很规范。希望各位可以提出，一起学习