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 使用详解