React Native 的 Navigator 组件(导航功能)

功能摘要 :

1. 左右按钮的跳转方法:

要导入外部页面:
import Login from ‘./TestClass/Login’;

//在导航控件中 添加 ref 属性指定控制器
   <NavigatorIOS
                        ref='nav'
                        initialRoute={{
                            // 设置初始路由下面的初始板块
                            component:DXHome,
                            title:'网易新闻',
                            leftButtonIcon:{uri:'navigationbar_friendattention_highlighted'},
                            onLeftButtonPress:()=>this._clickNavLeftBtn(),
                            rightButtonTitle:"登录",
                            onRightButtonPress:()=>this._clickNavRightBtn(),
                        }}
                        style={{flex:1}}
                        tintColor="rgba(255, 130, 1, 1.0)"
                    />

  /**
     * 点击了右边的按钮
     */
    _clickNavRightBtn(){
        // alert('点右边');
        this.refs.nav.push({
            title:'登录',
            component:Login      //点击导航右侧的按钮跳转到的页面
        })
    }

---

---

---

在0.44版本之前和之后的方法是不同的,有时候回出现以下问题:

‘Navigator is deprecated and has been removed from this package. It can now be installed ’ +
‘and imported from react-native-deprecated-custom-components instead of react-native. ’ +
‘Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html’

所以有可能是0.44版本后不支持淘汰的方法,需要更换中实现方法

---

---

方法 一 :

1. 在  index.ios.js  文件中

/**
 * Created by  Liu on 2017/6/20.
 */

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

import { StackNavigator } from 'react-navigation';
import { TabNavigator } from "react-navigation";

var MoveList = require("./movieListView"); //也可以引入一个页面使用

class ChatScreen extends React.Component {
    // Nav options can be defined as a function of the screen's props:
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        // The screen's current route is passed in to `props.navigation.state`:
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text>Chat with {params.user}</Text>
            </View>
        );
    }
}



class AllContactsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>List of all contacts</Text>
                <Button
                    //跳转
                    onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params
                    title="Chat with Jane"
                />
            </View>
        );
    }
}



AllContactsScreen.navigationOptions = {
    title: 'My Chats',
};

const SimpleAppReactNavigation = StackNavigator({
    Home: { screen: AllContactsScreen },  //第一栈
    Chat: { screen: ChatScreen },           //第二栈
});

AppRegistry.registerComponent('HelloReactNative', () => SimpleAppReactNavigation);

---

---

方法 二 :

带TabNavigator(分段选择)

1. 在  index.ios.js  文件中

/**
 * Created by  Liu on 2017/6/20.
 */

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

import { StackNavigator } from 'react-navigation';
import { TabNavigator } from "react-navigation";

var MoveList = require("./movieListView"); //也可以引入一个页面使用

class ChatScreen extends React.Component {
    // Nav options can be defined as a function of the screen's props:
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        // The screen's current route is passed in to `props.navigation.state`:
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text>Chat with {params.user}</Text>
            </View>
        );
    }
}

class RecentChatsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>List of recent chats</Text>
                <Button
                    onPress={() => navigate('Chat', {user: 'Lucy'})} //Passing params
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

class AllContactsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>List of all contacts</Text>
                <Button
                    //跳转
                    onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params
                    title="Chat with Jane"
                />
            </View>
        );
    }
}

const MainScreenNavigator = TabNavigator({
    Recent: { screen: RecentChatsScreen },
    All: { screen: AllContactsScreen },
});

MainScreenNavigator.navigationOptions = {
    title: 'My Chats',
};

const SimpleAppReactNavigation = StackNavigator({
    Home: { screen: MainScreenNavigator },  //第一栈
    Chat: { screen: ChatScreen },           //第二栈
});

AppRegistry.registerComponent('HelloReactNative', () => SimpleAppReactNavigation);

---

---

方法三 : (淘汰)

这是0.44版本前的方法,现在官方已经摒弃这种方法了,所以出不了效果

1.在.js文件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity
} from 'react-native';

/*
*   导航器通过路由对象(route)来分辨不同的场景.每个路由对象都对应一个页面组件,开发者设置什么,导航器显示什么,所以导航器中重要的一个对象.
*
*   三步操作实现导航功能:
*   1.设置路由对象(告诉导航器我要显示哪个页面)
*       创建路由对象,对象的内容自定义,但是必须包含该场景需要展示的页面组件.
*   2.场景渲染配置(告诉导航器我要什么样的页面跳转效果)
*   3.渲染场景(告诉导航器如何渲染页面)
*       利用第一步设置的路由对象进行渲染场景
*
*
* */


//定义第一个页面
//FirstPage 一个 button, 点击进入下一级页面
var FirstPage = React.createClass({
    //按钮 onPress 事件处理方法
    pressPush: function () {
        //推出下一级页面
        var nextRoute ={
            component: SecondPage
        };
        this.props.navigator.push(nextRoute);
    },
    render: function () {
        return(
            <View style={[styles.flex,{backgroundColor:"yellow"}]}>
                <TouchableOpacity onPress ={this.pressPush}>
                    <Text>点击推出下一级页面</Text>
                </TouchableOpacity>
            </View>
        );
    }
});

//定义第二个页面
//SecondPage 一个 button, 点击返回上一级页面
var SecondPage = React.createClass({
    pressPop:function () {
    //返回上一级
        this.props.navigator.pop();
    },
    render:function () {
        return(
            <View style={[styles.flex,{backgroundColor:"cyan"}]}>
                <TouchableOpacity
                    style={styles.btn}
                    onPress={this.pressPop}
                >
                    <Text>点我返回上一级</Text>
                </TouchableOpacity>
            </View>
        );
    }

});




var MyNavigatorTest = React.createClass({
    render: function () {

        var  rootRoute ={
            component: FirstPage
        };

        return(
            <Navigator
                /*
                * 第一步:
                * initialRoute
                *
                * 这个指定了默认的页面,也就是启动 app 之后看到的界面的第一屏
                * 对象的属性是自定义的,这个对象中的内容会在 renderScene 方法中处理
                *
                * 备注:必须包含的属性,既 component, 表示需要渲染的页面组件
                *
                * */

                initialRoute={rootRoute}

                /**
                 *
                 *  第二步:
                 *
                 *  configureScene
                 *
                 *  场景渲染的配置
                 */
                configureScene={(route) => {
                    return Navigator.SceneConfigs.PushFromRight;

                }}

                /*
                 *  第三步:
                 *   renderScene
                 *
                 *   渲染场景
                 *
                 *  参数: route(第一步创建并设置给导航器的路由对象),navigator(导航器对象)
                 *   实现: 给需要显示的组件设置属性
                */
                renderScene={(route, navigator) => {
                  //从 route对象中获取页面组件
                   var Component = route.component;
                    return(
                        <Component
                            navigator={navigator}
                            route={route}
                        />
                    );
                }}

            />
        );
    }
});

var styles = StyleSheet.create({
    flex:{
                flex:1,
                justifyContent:"center",
                alignItems:"center"
    },
    btn:{
        width:150,
        height:30,
        borderColor:"#0089FF",
        borderWidth:1,
        borderRadius:3,
        justifyContent:"center",
        alignItems:"center"
    },

});

module.exports = MyNavigatorTest;

---

---

---

---

资料:

React Native未来导航者：react-navigation 使用详解