react native的Navigator组件示例

import React, {Component} from 'react';
import {ScrollView, StyleSheet, Text, View, PixelRatio} from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components'; // 0.45以上的版本要从这个模块获取导航

export default class NavigatorList extends Component {
    render() {
        let defaultName = 'List2'   // 定义默认的组件名称
        let defaultComponent = List2  //定义默认显示的组件
        return (
            <Navigator
                initialRoute={{ name: defaultName, component: defaultComponent}} //初始化路由，有name和component属性，即默认显示的组件信息
                // 配置场景
                configureScene = {
                    (route) => {
                    //    这个是页面之间跳转的动画，VerticalDownSwipeJump是一种动画方式
                        return Navigator.SceneConfigs.VerticalDownSwipeJump;
                    }
                }
                // 将组件显示出来
                renderScene={
                    (route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator}/>
                    }
                }
            />
        );
    }
}
class List2 extends Component {
    constructor(props) {
        super (props);
        this.state = {};
    }
    _pressButton() {
        const {navigator} = this.props;
        if(navigator) {
            navigator.push({
                name: 'Detail',
                component: Detail,
            })
        }
    }
    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'red'}}>
                <Text onPress={this._pressButton.bind(this)}>内容1</Text>
                <Text onPress={this._pressButton.bind(this)}>内容2</Text>
                <Text onPress={this._pressButton.bind(this)}>内容3</Text>
            </View>
        )
    }
}
class Detail extends Component {
    constructor(props) {
        super (props);
        this.state = {};
    }
    _pressButton() {
        const {navigator} = this.props;
        if(navigator) {
            navigator.pop();    //将路由弹出去
        }
    }
    render() {
        return (
            <ScrollView>
                <Text onPress={this._pressButton.bind(this)}>点我跳回去</Text>
            </ScrollView>
        )
    }
}
巴特西

react native的Navigator组件示例

最新文章

热门文章
