【React Native开发】

来源：互联网发布：5c5c5c最新域名地址编辑：程序博客网时间：2024/06/06 02:57

1.Navigator的认识

官方介绍：使用Navigator可以使的应用在不同场景（页面）之间进行切换。Navigator通过路由对象（route）分辨不同的

场景（页面）。利用renderScene()方法，导航栏可以根据指定的路由来渲染场景（页面）。

Navigator可以通过configureScene属性获取路由对象的配置信息，从而改变场景的动画或手势。

2.Navigator属性

- initialRoute object 参数对象进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项。

- initialRouteStack [object] 参数对象数组是一个初始化的路由数组。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用最后一项作为初始路由。如果initalRouteStack属性没有设置的话，会生成只包含initalRoute值的数组。

- configureScene function 方法，为可选的方法，进行配置页面切换动画和手势。通过路由和路由栈两个参数调用，返回一个页面参数配置对象：

configureScene = {    (route,routeStack) => {        return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画    }} - navigator object 可选参数，可以从父类导航器中获取导航器对象。 - navigationBar  node  该为可选的参数，在页面切换中用来提供一个导航栏。 - renderScene  function  必须调用的方法，用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数。 - sceneStyle 样式风格，该继承了View视图的所有样式风格。场景转场动画的分类： Navigator.SceneConfigs.PushFromRight (default)
 Navigator.SceneConfigs.FloatFromRight Navigator.SceneConfigs.FloatFromLeft Navigator.SceneConfigs.FloatFromBottom Navigator.SceneConfigs.FloatFromBottomAndroid Navigator.SceneConfigs.FadeAndroid Navigator.SceneConfigs.HorizontalSwipeJump Navigator.SceneConfigs.HorizontalSwipeJumpFromRight Navigator.SceneConfigs.VerticalUpSwipeJump Navigator.SceneConfigs.VerticalDownSwipeJump

3.Navigator方法

- getCurrentRoutes() 返回存在的路由列表信息
- jumpBack() 回退操作，但是不会卸载（删除）当前页面

- jumpForward() 跳转到相对于当前页面的下一个页面

- jumpTo(route) 根据传入的路由信息，跳转到一个指定的页面（该页面不会卸载删除）

- push(route) 导航切换到一个新的页面，新的页面进行入栈。通过jumpForward()方法可以回退过去

- pop 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

- replace(route) 传入路由的指定页面进行替换掉当前的页面

- replaceAtIndex(route, index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面

- replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面

- resetTo(route) 进行导航到新的界面，并且重置整个路由栈

- immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

- popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除

- popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

4.实例

index.android.js和index.ios.js代码：

import './luancher'

luancher.jsimport React, { Component } from 'react';import {    AppRegistry,} from 'react-native';
import Root from './navigator/root'AppRegistry.registerComponent('ImageDemo', () => Root);
使Android和IOS都可运行。

root.js

import React ,{Component} from 'react'import {    StyleSheet,    View,    Text,    Navigator,    Dimensions,    Platform,    StatusBar,} from 'react-native'import Home from './Home'export default class Root extends Component{    constructor(props){        super(props)    }        render(){        return (            Platform.OS === 'ios'?(                <View style={styles.container}>                    <Navigator                        initialRoute = {{name: 'home', component: Home}}　　//初始化导航器Navigator,指定默认的页面                        configureScene = {                            (route,routeStack) => {                                return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画                            }                        }                        renderScene = {                            (route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象                                let Component = route.component;                                return <Component{...route.params} navigator = {navigator} />　　//渲染场景  navigator作为props传递给了这个 component。                            }                        }                    />                </View>            ):(            <View style={styles.container}>                <StatusBar                    backgroundColor="#FD6363"                    barStyle="light-content"/>                <Navigator                    initialRoute = {{name: 'home', component: Home}}　　//初始化导航器Navigator,指定默认的页面                    configureScene = {                            (route) => {                                return Navigator.SceneConfigs.FloatFromRight;　　//配置场景动画，页面之间跳转时候的动画                            }                        }                    renderScene = {                            (route, navigator) =>{ //route里其实就是我们传递的name,component，navigator是一个 Navigator的对象                                let Component = route.component;                                return <Component{...route.params} navigator = {navigator} />　　//渲染场景  navigator作为props传递给了这个 component。                            }                        }                />            </View>        )        )    }}const styles = StyleSheet.create({    container:{        flex:1,    },})root.js解析：initialRoute初始化一个Route（路由），定义初始化的Component；      configureScene设置页面切换的动画；      renderScene渲染场景，指定路由和导航器，并把导航器传递进去。Home.jsimport React,{Component} from 'react'import {    StyleSheet,    View,    Text,    Navigator,    TouchableHighlight,    Dimensions,} from 'react-native'import Detail from './Detail'const {width,height} = Dimensions.get('window')export default class Home extends Component{    constructor(props){        super(props)    }    render(){        return (            <View style={styles.btn}>                <TouchableHighlight style={styles.touchableBtn} onPress={this.toPage.bind(this)}>                    <Text style={styles.text}>跳转页面</Text>                </TouchableHighlight>            </View>        )    }    toPage(){        const {navigator} = this.props        if (navigator){            navigator.push({                name:'detail',                component:Detail,            })        }    }}const styles = StyleSheet.create({    btn:{        justifyContent:'center',        alignItems:'center',        backgroundColor:'#fff',        height:height,    },    touchableBtn:{        backgroundColor:'#FD6363',        padding:8,        borderRadius:8,    },    text:{        color:'#fff',        fontSize:12,    },})Home.js解析： toPage(){        const {navigator} = this.props         if (navigator){            navigator.push({                name:'detail',                component:Detail,            })        }    }
navigator.push压栈
 const {navigator} = this.props //从props中取的Navigator，确保用的是同一个

Detail.js
import React ,{Component} from 'react'import {    StyleSheet,    View,    Text,    Image,    TouchableHighlight,    Dimensions,} from 'react-native'const {width,height} = Dimensions.get('window')export default class Detail extends Component{    constructor(props){        super(props)    }    back(){        const{navigator} = this.props;        if(navigator){            navigator.pop();　　//navigator.pop 使当前页面出栈, 显示上一个栈内页面.        }    }    render(){        return (            <View style={styles.container}>                <View style={styles.titleStyle}>                    <TouchableHighlight onPress={this.back.bind(this)}>                        <Image source={require('./images/ic_back.png')} style={styles.back}></Image>                    </TouchableHighlight>                    <Text style={styles.textStyle}>详情页</Text>                </View>            </View>        )    }}const styles = StyleSheet.create({    container:{        flex:1,    },    titleStyle:{        flexDirection:'row',        height:40,        backgroundColor:'#FD6363',        alignItems:'center',    },    back:{        marginLeft:10,        width:25,        height:25,    },    textStyle:{        position:'absolute',        color:'#fff',        fontSize:14,        top:12,        left:(width/2-12),    },})

5.效果

点击跳转页面按钮跳转到详情页面

点击返回按钮再次返回到上一页面

阅读全文

0 0