关于react-native navigator 记录

<span style="font-size:18px;">import React, {Component} from 'react';</span>

<span style="font-size:18px;">import {
    StyleSheet,
    Text,
    View,
    <span style="color:#ff0000;">Navigator,</span>
    TouchableOpacity
} from 'react-native';</span>

类的创建类似于java中类的创建方式

testView代码

<span style="font-size:18px;">class testView extends Component {

    renderScene(route, navigator) {
        return <route.component navigator={navigator}  {...route.passProps} />;
    }

    configureScene(route, routeStack) {
        if (route.type == 'Modal') {
            return Navigator.SceneConfigs.FloatFromBottom;
        }
        return Navigator.SceneConfigs.PushFromRight;
    }


    render() {
        return (

            <Navigator
                style={{flex:1}}
                initialRoute={{name: 'FirstPage', component: FirstPage}} //初始化navigator的路径
                //配置push出的页面方向
                configureScene={this.configureScene}
                //push的信息函数
                renderScene={this.renderScene}
                navigationBar={
          <Navigator.NavigationBar
            style={styles.navContainer}
            routeMapper={NavigationBarRouteMapper}/>}
            />
        )
    }
}</span>

firstPage

<span style="font-size:18px;">class FirstPage extends Component {

    onPress() {
        alert("我是Spike!");
    }

    gotoNext(name, type = 'Normal') {
        this.props.navigator.push({
            component: secondPage,
            passProps: {
                id: name
            },
            onPress: this.onPress,
            rightText: 'ALERT!',
            type: type
        })
    }


    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={styles.button}
                    onPress={()=>this.gotoNext('第一页')}>
                    <Text style={styles.buttonText}>
                        {'跳转至第二页(右出)'}
                    </Text>
                </TouchableOpacity>
            </View>


        )
    }

}
</span>

导航栏配置

var NavigationBarRouteMapper = {

    LeftButton(route, navigator, index, navState) {
        if (index > 0) {
            return (
                <View style={styles.navContainer}>
                    <TouchableOpacity
                        underlayColor='transparent'
                        onPress={() => {if (index > 0) {navigator.pop()}}}>
                        <Text style={styles.leftNavButtonText}>
                            后退
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return null;
        }
    },
    // 右键
    RightButton(route, navigator, index, navState, firstPage) {
        // if (route.onPress)
            return (
                <View style={styles.navContainer}>
                    <TouchableOpacity
                        onPress={() => {navigator.push({
                        component: secondPage,
                        message: 'Swipe right to dismiss',
                        sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                        passProps: {
                        id: '顶顶顶顶'
                       },
                        // onPress: this.onPress,
                        rightText: 'xixixi!',
                        // type: type
                        })}}
                    >
                        <Text style={styles.rightNavButtonText}>
                            {route.rightText || '右键'}
                        </Text>
                    </TouchableOpacity>
                </View>
            );
    },
    // 标题
    Title(route, navigator, index, navState) {

        var title = "第一页";
        if (index == 1) {
            title = "第二页";
        }
        return (
            <View style={styles.navContainer}>
                <Text style={styles.title}>
                    {title}
                </Text>
            </View>
        );
    }
};