詳解js界面跳轉與值傳遞

更新時間：2016年11月22日 14:26:34 作者：bury_pen

這篇文章主要為大家詳細介紹了js界面跳轉與值傳遞的相關代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例實現(xiàn)的功能如下：注冊頁(Register.js)，點擊注冊，跳到注冊結果頁(RegisterResult.js)，并將注冊的手機號傳遞過去，顯示xx注冊成功。

index.Android.js

'use strict'
import React, { Component } from 'react';
import { AppRegistry,Navigator,BackAndroid} from 'react-native';

var Register = require('./study/Register');
let RegisterResult = require('./study/RegisterResult');
var NaviModule = React.createClass({

  //告知Navigator模塊，我們希望在視圖切換時，用什么效果
  configureScene:function(route){
    return Navigator.SceneConfigs.FadeAndroid;
  },

  //告知Navigator模塊，我們希望如何掛接當前視圖
  renderScene:function(router,navigator){
    this._navigator = navigator;
    switch(router.name){
      case "register":
        return <Register navigator = {navigator}/>
      case "registerResult":
        return <RegisterResult telephoneNumber = {router.telephoneNumber} navigator = {navigator}/>

    }
  },

  //React的生命周期函數(shù)---組件被掛接時調用
  componentDidMount:function(){
    var navigator = this._navigator;
    BackAndroid.addEventListener('NaviModuleListener',()=>{
      if (navigator && navigator.getCurrentRoutes().length > 1) {
        navigator.pop();
        return true;
      }
      return false;
    });
  },

  //React的生命周期函數(shù)---組件被移除時調用
  componentWillUnmount: function(){
    BackAndroid.removeEventListener('NaviModuleListener');
  },

  render:function(){
    return (
      <Navigator
        initialRoute = {{name:'register'}}
        configureScene = {this.configureScene}
        renderScene = {this.renderScene} />
      );
  }

});

AppRegistry.registerComponent('FirstDemo', () => NaviModule);

注冊頁（Register.js）

'use strict'
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from 'react-native';

let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componetWidth = totalWidth * 0.8;

let Register = React.createClass({

  getInitialState:function(){
    return {
      inputedNum :'',
      inputedPW:'',
  },

  updatePW: function(newText){
    this.setState({inputedPW : newText});
  },

 render: function() {
  return (
   <View style={styles.container}>
    <TextInput style = {styles.numberInputStyle}
     placeholder = {'請輸入手機號'}
     onChangeText = {(aa) => this.setState({inputedNum :aa})}/>
    <Text style={styles.textPromptStyle}>
     您輸入的手機號：{this.state.inputedNum}
    </Text>
    <TextInput style={styles.passwordInputStyle}
     placeholder = {'請輸入密碼'}
     password = {true}
     onChangeText = {(newText) => this.updatePW(newText)}/>
    <Text style={styles.bigTextPrompt}
     onPress = {this.userRegister}>
     注 冊
    </Text>
   </View>);
 },

 userRegister:function(){
  this.props.navigator.replace({
   telephoneNumber : this.state.inputedNum,
   name: 'registerResult',
  });
 }

});

const styles = StyleSheet.create({
 container: {
  flex: 1,
  flexDirection:'column',
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
 },
 numberInputStyle:{
  top:20,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:'gray',
  fontSize:20
 },
 textPromptStyle:{
  top:30,
  left:leftStartPoint,
  width:componetWidth,
  fontSize:20
 },
 passwordInputStyle:{
  top:50,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:'gray',
  fontSize:20
 },
 bigTextPrompt:{
  top:70,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:'gray',
  color:'white',
  textAlign:'center',
  fontSize:60
 }
});

module.exports = Register;

注冊結果頁RegisterResult.js

'use strict'
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from 'react-native';

let RegisterResult = React.createClass({

  render:function(){
    return(
      <View style = {styles.container}>
        <Text style = {styles.text}>
          {this.props.telephoneNumber}注冊成功
        </Text>
      </View>
    );
  }

});

const styles = StyleSheet.create({
  container: {
  flex: 1,
  flexDirection:'column',
  justifyContent: 'center',
  alignItems:'center',
  backgroundColor: '#F5FCFF',
 },
 text:{
  flexWrap:'wrap',
  backgroundColor:'gray',
  fontSize:20,
  paddingTop:10,
  paddingBottom:10,
  paddingLeft:25,
  paddingRight:25
 },
});

module.exports = RegisterResult;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: