ReactNative Navigator

https://facebook.github.io/react-native/docs/navigator.html

Navigator实现了页面之间的跳转。

Demo描述：打开即进入“课程”页面，点击详情按钮，进入“课程详情”页面，“课程详情”页面点击头部返回按钮返回“课程”页面。

Navigator简单使用

添加 Navigator 的组件<Navigator/>。

设置方法: 初始化路由(initialRoute)，配置场景动画(configureScene)，渲染场景(renderScene)，初始化路由(initialRoute)，使用CourseListView页面作为首页。

//主模块

render() {

    const routes = [

        {component: CourseListView, name: 'CourseList'}

    ];

    return (

        <Navigator

            style={{flex:1}}

            configureScene={this.configureScene}

            initialRoute={routes[0]}

            renderScene={this.renderScene}/>

    );

}

配置场景动画(configureScene): 根据路由的type属性, 判断使用的动画样式, 底部弹出或右侧弹出，或者官网介绍的其他样式。

configureScene(route, routeStack) {

    if (route.type == 'Bottom') {

        return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出

    }

    return Navigator.SceneConfigs.PushFromRight; // 右侧弹出

}

渲染场景(renderScene): 使用动态加载组件的方式。设置加载页面的navigator参数, 其余使用route.passProps属性传递其他参数。可以动态加载组件，也可以静态加载组件。

//使用动态加载组件

renderScene(route, navigator) {

    return <route.component navigator={navigator}  {...route.passProps} />;

}

//使用静态加载组件，不是特别灵活，还需要预定义组件

renderScene(route, navigator) {

    if (route.name == 'CourseList') {

      return <CourseListView navigator={navigator} {...route.passProps}/>

    } else if (route.name == 'CourseDetail') {

      return <CourseDetailView navigator={navigator} {...route.passProps}/>

    }

}

以上是介绍index.ios.js设置默认路由的方法。

CourseListView.js

/**

 * Created by myz on 16/12/8.

 */

'use strict';

import React, { Component } from 'react';

import {

    Navigator,

    Text

} from 'react-native';

import {

    Button,

    Container,

    Content,

    Header,

    Title

} from 'native-base';

import CourseDetailView from './CourseDetailView.js';

export default class CourseListView extends Component {

    _navigate(name, type = 'Normal') {

        this.props.navigator.push({

            component: CourseDetailView,

            name: 'CourseDetail',

            passProps: {

                name: name

            },

            type: type

        })

    }

    render() {

        return (

            <Container>

                <Header>

                    <Title>课程</Title>

                </Header>

                <Content>

                    <Button block style={{marginTop:30}} onPress={()=>this._navigate('CourseDetail')}>

					<Text>我是课程</Text>

					</Button>

                </Content>

            </Container>

        );

    }

}

`之后再定义CourseDetailView组件，这样就可以实现页面跳转了。`

_navigate()方法: 导航跳转, 调用navigator.push()方法。传递参数passProps的name属性, type动画类型, component跳转组件。
跳到指定页面是调用navigator.push()方法；
返回第一页是调用this.props.navigator.pop()，使当前页面出栈，显示上一个栈内页面。

统一导航栏

额外添加navigationBar的属性, 自定义设置导航栏, 保持所有页面的导航栏一致. 属性添加<NavigationBar/>标签, 通过routeMapper控制导航栏的功能和样式。

<Navigator

    style={{flex:1}}

    configureScene={this.configureScene}

    initialRoute={routes[0]}

    renderScene={this.renderScene}

    navigationBar={

      <Navigator.NavigationBar

        routeMapper={NavigationBarRouteMapper}/>}

/>

NavigationBarRouteMapper用来设置左键LeftButton，右键RightButton，标题Title。

var NavigationBarRouteMapper = {

    // 左键

    LeftButton(route, navigator, index, navState) {

        if (index > 0) {

            return (

                <Button transparent onPress={() => {if (index > 0) {navigator.pop()}}}>

                    <Icon name='ios-arrow-back'/>

                </Button>

            );

        }

    },

    // 右键

    RightButton(route, navigator, index, navState) {

        if (route.onPress)

            return (

                <Button onPress={() => route.onPress()}>

                    <Text> {route.rightText || '右键'}</Text>

                </Button>

            );

    },

    // 标题

    Title(route, navigator, index, navState) {

        return (

            <Title>{route.name}</Title>

        );

    }

};

同时，当“课程”页面跳转的时候，传递的路由信息有些变化，控制“课程详情”页面导航栏的显示信息。

_onPress() {

    alert("我是导航栏右边按钮!");

}

_navigate(name, type = 'Normal') {

    this.props.navigator.push({

        component: CourseDetailView,

        name: '课程详情',

        passProps: {

            name: name

        },

        onPress: this._onPress,

        rightText: '右边',

        type: type

    })

}

巴特西

ReactNative Navigator

Navigator简单使用

CourseListView.js

`之后再定义CourseDetailView组件，这样就可以实现页面跳转了。`

统一导航栏

最新文章

热门文章