react native Navigator 属性传参应用

最新推荐文章于 2024-02-27 14:58:51 发布

keen_zuxwang

最新推荐文章于 2024-02-27 14:58:51 发布

阅读量957

点赞数

CC 4.0 BY-SA版权

分类专栏： react native 文章标签： react-native navigator

本文链接：https://blog.youkuaiyun.com/keen_zuxwang/article/details/71435890

react native 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用React Native Navigator进行页面间参数传递的具体案例。文章详细解释了如何在两个页面间通过Navigator组件进行参数传递，并展示了如何在目标页面接收并处理这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react native Navigator 属性传参应用

1、命令行创建、运行：

 react-native init myrnprj1  // 创建工程
 cd myrnprj1
 react-native start  // 开启packager服务 -- Running packager on port 8081.

//浏览器地址栏输入：http://localhost:8081/index.android.bundle?platform=android （正常会显示index.android.bundle 内容），同时命令行会显示 Bundling index.android.js *, done.

2、在index.android.js同级目录下添加功能测试文件：
first.js second.js style.js

index.android.js：

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

import FirstPage from './first';

class myrnproj1 extends Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <Navigator
       initialRoute={{name:'FirstPage',component:FirstPage}} // 初始化 route, 即指定要显示的component
       renderScene={
         (route,navigator)=>{
           let Component = route.component;
           return <Component {...route.params} navigator={navigator}/>
         }
       }/>
    );
  }
}

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

first.js：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

import Second from './second';
import {styles} from './style';

export default class FirstPage extends Component {
  constructor(props){
    super(props);
    this.state={
      name:'wang zu xing',
      job:'',
    }
  }
  render() {
    return (
      <View style={styles.Container}>
        <Text style={styles.welcome}>
          first page, transfer name to second page, get job
        </Text>
        <Text style={styles.instructions}>
          my name: {this.state.name}
        </Text>
        <Text style={styles.instructions}>
          my job: {this.state.job}
        </Text>
        <Text style={{color:'red',fontSize:25}} onPress={this.goSecondPage}>
          get job
        </Text>
      </View>
    );
  }
  goSecondPage=()=>{
    const {navigator} = this.props; // this.props.navigator 属性
    if (navigator) {
      navigator.push({  //通过属性传参给second.js
        name:'Second',
        component:Second,
        params:{
          name:this.state.name,
          getJob:(job)=>{ 
            this.setState({
              job:job
            })
          }
        }
      })
    }
  }
}

second.js：

import React, { Component, PropTypes} from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

import {styles} from './style';

export default class SecondPage extends Component {
  constructor(props){
    super(props);
    this.state={
      job:'android engineer'
    }
  }

  //实例化调用，默认属性props
  static get defaultProps() {
     return {
        name: "",
        age: 35
     }
  }
  // 定义属性及约束    
  static propTypes = {
     name: PropTypes.string.isRequired,
     age: PropTypes.number.isRequired
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          second page, return job
        </Text>
        <Text style={styles.instructions}>
          name: {this.props.name}
        </Text>
        <Text style={styles.instructions}>
          age: {this.props.age}
        </Text>
        <Text style={styles.instructions}>
          job: {this.state.job}
        </Text>
        <Text style={{color:'red',fontSize:25}} onPress={this.goFirstPage}>
          first page
        </Text>
      </View>
    );
  }
  goFirstPage=()=>{
    const {navigator} = this.props;
    let job = this.state.job;
    this.props.getJob(job); // this.props.getJob属性对应goSecondPage()中的params中的getJob项，回传参数
    if (navigator) {
        navigator.pop();
    }
  }
}

style.js：

import {
  StyleSheet
} from 'react-native';

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