簡單的小案例。在首頁上有選項卡和頁面跳轉(zhuǎn)的功能。從首頁跳到第二個頁面，第二個頁面可以跳轉(zhuǎn)到第三四個頁面

參考網(wǎng)站 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。因為剛學(xué)習(xí)，可能有很多地方寫的不是很規(guī)范。希望各位可以提出，一起學(xué)習(xí)