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

最终真机运行结果:
这里写图片描述

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值