react-native导航库react-navigation（一）

1、react-navigation库和react一样，都必须npm下载之后才能使用。

npm install --save-dev react-navigation

下载之后引用：

import { StackNavigator } from 'react-navigation';

使用的方式是配置screen。

const App = StackNavigator({
    Main:{screen:MainScreen},
    Profile:{screen:ProfileScreen}
})

其中，MainScreen和ProfileScreen是一个Component或者Navigator。

2、StackNavigator
Stack，见名知意，就是栈的意思，在数据结构中，是这样描述栈的，栈是一种具有特定行为的单链表，遵循的规则就是“先进后出，后进先出”的原则。

StackNavigator就是管理纵向路由的导航器。

例如这样的一个示例：

const App = StackNavigator({
    Main:{screen:MainScreen},
    Profile:{screen:ProfileScreen}
})

Main代表着最上层展示的视图，Profile视图在Main的内层。
如果想要看到Profile的视图，必须经过Mian视图中进行navigate导航。
上面这个示例中的,StackNavigator的参数是一个对象，screen代表视图。

一个简单的demo如下：
App.js

import { StackNavigator } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import ChatScreen from './components/ChatScreen';
const App = StackNavigator({
    Home: {screen:HomeScreen},
    Chat: {screen:ChatScreen}
});

export default  App;

HomeScreen.js

/**
 * Created by mapbar_front on 2017/6/1.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';

export default class HomeScreen extends Component {
    static navigationOptions = {
        title:"Welcome",
    }
    render() {
        const {navigate} = this.props.navigation;
        console.log(this.props);
        return (

            <View style={styles.container}>
                <Button onPress={()=>navigate('Chat',{user:"mapbar_front"})} title="chat"/>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

ChatScreen.js
/**
* Created by mapbar_front on 2017/6/1.
*/
import React, { Component } from ‘react’;
import {
Text,
View,
Button
} from ‘react-native’;

export default class ChatScreen extends Component {
static navigationOptions = {
title:”Chat”,
}
render() {
console.log(this.props);
return (

{this.props.navigation.state.params.user}Chat with Lucy
this.props.navigation.goBack()} title=”back”>

);
}
}

最后的index.android.js

import {
    AppRegistry
} from 'react-native';

import App from './src/App';
AppRegistry.registerComponent('AwesomeProject', () => App);

3、TabNavigator
Tab,见名知意，切换，可用作tab切换，比如常见的底部导航栏切换，就是由TabNavgator来完成的。

引入和StackNavigator一样：

import { TabNavigator } from 'react-navigation';

同样，它的使用也是进行screen配置：

const AppTabNavigator = TabNavigator({
    Home:{screen:HomeScreen},
    Page:{screen:PageScreen}
});

完整示例如下：
App.js

import { TabNavigator } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import ChatScreen from './components/ChatScreen';
const App = TabNavigator({
    Home: {screen:HomeScreen},
    Chat: {screen:ChatScreen}
});

export default  App;

HomeScreen.js

import React,{ Component } from 'react';
import { Text } from 'react-native';
export default class HomeScreen extends Component{
    render() {
        return <Text>This page is HomeScreen</Text>
    }

}

ChatScreen.js

import React,{ Component } from 'react';
import { Text } from 'react-native';
export default class ChatScreen extends Component{
    render() {
        return <Text>This page is ChatScreen</Text>
    }

}

最后，index.android.js

import {
    AppRegistry,
    Text,
} from 'react-native';

import App from './src/App';
AppRegistry.registerComponent('AwesomeProject', () => App);

4 、一般而言、一个应用的路由是复杂的，但其基本规律脱离不了路由嵌套，而StackNavigator和TabNavigator的嵌套使用，就能达到处理复杂路由的目的。

嵌套的本质使用方式就是导航器的screen可以是一个StackNavigator或者TabNavigator。

基本使用方式就是：

const App = StackNavigator({
    Home:{screen:HomeScreen},
    Chat:{screen:ChatTabNavigator}
});

其中，ChatTabNavigator就是一个TabNavigator的实例。

搭配使用的代码demo：
App.js

import { StackNavigator } from 'react-navigation';

import HomeScreen from './components/HomeScreen';

import ChatTabNavigator from './components/ChatTabNavigator';

const App = StackNavigator({
    Home:{screen:HomeScreen},
    Chat:{screen:ChatTabNavigator}
});
export default App;

HomeScreen.js

import React,{ Component } from 'react';
import { Text,View,Button } from 'react-native';
export default class HomeScreen extends Component{
    static navigationOptions = {
        title:"HomeScreen",
    }
    render() {
        return (
        <View>
            <Text>This page is HomeScreen</Text>
            <Button onPress={()=>this.props.navigation.navigate("Chat")} title="got to tab"></Button>
        </View>
        )
    }

}

ChatTabNavigator.js

import React,{ Component } from 'react';
import { Text } from 'react-native';
import { TabNavigator } from 'react-navigation';
class Mapbar_frontScreen extends Component{
    static navigationOptions = {
        title:"Mapbar_frontScreen"
    }
    render() {
        return <Text>This page is Mapbar_frontScreen</Text>
    }

}
class Tencent_frontScreen extends Component{
    static navigationOptions = {
        title:"Tencent_frontScreen"
    }
    render() {
        return <Text>This page is Tencent_frontScreen</Text>
    }

}
const ChatTabNavigator = TabNavigator({
    Mapbar_front:{screen:Mapbar_frontScreen},
    Tencent_front:{screen:Tencent_frontScreen}
});
export default ChatTabNavigator;

最后的index.android.js

import {
    AppRegistry,
    Text,
} from 'react-native';

import App from './Tab_and_Stack/App';
AppRegistry.registerComponent('AwesomeProject', () => App);

最终真机运行结果：