react native 界面跳转与点击事件

                                                                                                      React Native 界面跳转与点击事件

ReactNative页面跳转Navigator

Navigator即导航器，通过导航器我们可以实现应用在不同的页面之间进行跳转。 
导航器会建立一个路由栈，用来弹出，推入或者替换路由状态。该路由栈相当于Android原生中使用的任务栈。

renderScene

该方法就相当于我们使用的startActivity方法了，我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中route就是路由的页面，navigator是一个Navigator对象，因为Navigator对象拥有pop，push，jump等方法，我们需要导航器对象来实现页面的跳转。而路由route需要我们提前进行配置。

我们来看一下renderScene的使用：

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

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

通过上面的方法来实现页面的跳转，同时将导航器作为属性进行传递过去。之前说过，route需要进行配置，通过initialRoute方法来对我们的路由进行初始化， 
如下所示：

    initialRoute={{ name: defaultName, component: defaultComponent }}

• 1

• 1

initialRoute是一个对象，我们通过给对象设置名称和对应的组件完成route的初始化，即只要传入需要跳转的组件的名称和组建对象，即可在renderScene中完成页面的跳转。

再回头看renderScene方法，route参数就是我们通过initialRoute初始化的对象，我们通过route.component即可获得我们需要渲染（即跳转到）的对象，然后在return的时候返回这个对象完成页面的跳转。为了防止出现问题，我们加上route.component为空的判断，如果不为空，再进行渲染。

        renderScene={(route, navigator) => {
            let Component = route.component;
            if(route.component){
                return 
            }
        }}

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

configureScene

该方法用来设置指定路由对象的配置信息，从而改变场景的动画或者手势。

    configureScene={(route) => {
      //跳转的动画
      return Navigator.SceneConfigs.VerticalDownSwipeJump;
    }}

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

例如通过如下的方法我们就可以对我们即将要跳转的界面设置跳转动画。 
Navigator.SceneConfigs为我们提供了大量的跳转动画，具体可以参考如下文件。

MyProject\node_modules\React-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js

这样我们就完成了在程序默认页面到我们自定义页面之间的跳转过程。

代码很简单可以直接复制粘贴使用，直接上源码，基础很差的先去RN中文官网看看

1.index.android.js的代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
 TouchableOpacity,
 Navigator
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
  var defaultName = 'FirstPageComponent';
 var defaultComponent = FirstPageComponent;
export default class AProject extends Component {
   constructor(props){
        super(props);
        this.state = {};
    }




  render() {
    return (
     
                  //指定了默认的页面，也就是启动app之后会看到的第一屏，需要两个参数，name跟component
          initialRoute={{ name: defaultName, component: defaultComponent }}
          configureScene={(route) => {
            //跳转的动画
            return Navigator.SceneConfigs.FadeAndroid;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            if(route.component){
                return
            }
          }} />
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 20,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


AppRegistry.registerComponent('AProject', () => AProject);

2. FirstPageComponent 的代码

import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    StyleSheet,
   TouchableOpacity,
} from 'react-native';
import Fan from './Fan';
export default class FirstPageComponent extends Component{
     constructor(props){
        super(props);
        this.state = {};
    }


    _pressButtoon(){
        const { navigator} = this.props;
        alert(navigator)
        
        if (navigator) {
            navigator.push({
                name:'Fan',
                component:Fan,
            })
        }
    }


    render(){
        return (
           
           
                我是默认页面
               
           
            );
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 20,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

3.Fan.js的代码

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight,StyleSheet } from 'react-native';
import FirstPageComponent from './FirstPageComponent';


export default class Fan extends Component {
   constructor(props){
        super(props);
        this.state = {};
    }


    _pressButton(){
        const { navigator } = this.props;
        if(navigator){
            navigator.pop();
        }
    }
  render() {
    return (
       
               
                    点我跳转回去
               
           
    
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 20,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});