js 인터페이스 점프 및 값 전송에 대한 자세한 설명

高洛峰
풀어 주다: 2016-12-05 16:08:36
원래의
1127명이 탐색했습니다.

이 글의 예시에서 구현한 기능은 다음과 같습니다. 등록 페이지(Register.js)에서 Register를 클릭하면 등록 결과 페이지(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的生命周期函数---组件被挂接时调用
  componentDidMount:function(){
    var navigator = this._navigator;
    BackAndroid.addEventListener(&#39;NaviModuleListener&#39;,()=>{
      if (navigator && navigator.getCurrentRoutes().length > 1) {
        navigator.pop();
        return true;
      }
      return false;
    });
  },
 
  //React的生命周期函数---组件被移除时调用
  componentWillUnmount: function(){
    BackAndroid.removeEventListener(&#39;NaviModuleListener&#39;);
  },
 
  render:function(){
    return (
      <Navigator
        initialRoute = {{name:&#39;register&#39;}}
        configureScene = {this.configureScene}
        renderScene = {this.renderScene} />
      );
  }
 
});
 
AppRegistry.registerComponent(&#39;FirstDemo&#39;, () => NaviModule);
로그인 후 복사

등록 페이지(Register.js)

&#39;use strict&#39;
import React, { Component } from &#39;react&#39;;
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from &#39;react-native&#39;;
 
let Dimensions = require(&#39;Dimensions&#39;);
let totalWidth = Dimensions.get(&#39;window&#39;).width;
let leftStartPoint = totalWidth * 0.1;
let componetWidth = totalWidth * 0.8;
 
let Register = React.createClass({
 
  getInitialState:function(){
    return {
      inputedNum :&#39;&#39;,
      inputedPW:&#39;&#39;,
  },
 
  updatePW: function(newText){
    this.setState({inputedPW : newText});
  },
 
 render: function() {
  return (
   <View style={styles.container}>
    <TextInput style = {styles.numberInputStyle}
     placeholder = {&#39;请输入手机号&#39;}
     onChangeText = {(aa) => this.setState({inputedNum :aa})}/>
    <Text style={styles.textPromptStyle}>
     您输入的手机号:{this.state.inputedNum}
    </Text>
    <TextInput style={styles.passwordInputStyle}
     placeholder = {&#39;请输入密码&#39;}
     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: &#39;registerResult&#39;,
  });
 }
 
});
 
const styles = StyleSheet.create({
 container: {
  flex: 1,
  flexDirection:&#39;column&#39;,
  justifyContent: &#39;center&#39;,
  backgroundColor: &#39;#F5FCFF&#39;,
 },
 numberInputStyle:{
  top:20,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&#39;gray&#39;,
  fontSize:20
 },
 textPromptStyle:{
  top:30,
  left:leftStartPoint,
  width:componetWidth,
  fontSize:20
 },
 passwordInputStyle:{
  top:50,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&#39;gray&#39;,
  fontSize:20
 },
 bigTextPrompt:{
  top:70,
  left:leftStartPoint,
  width:componetWidth,
  backgroundColor:&#39;gray&#39;,
  color:&#39;white&#39;,
  textAlign:&#39;center&#39;,
  fontSize:60
 }
});
 
module.exports = Register;
로그인 후 복사

RegisterResult.js

&#39;use strict&#39;
import React, { Component } from &#39;react&#39;;
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 TextInput
} from &#39;react-native&#39;;
 
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:&#39;column&#39;,
  justifyContent: &#39;center&#39;,
  alignItems:&#39;center&#39;,
  backgroundColor: &#39;#F5FCFF&#39;,
 },
 text:{
  flexWrap:&#39;wrap&#39;,
  backgroundColor:&#39;gray&#39;,
  fontSize:20,
  paddingTop:10,
  paddingBottom:10,
  paddingLeft:25,
  paddingRight:25
 },
});
 
module.exports = RegisterResult;
로그인 후 복사


관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!