RN 跨级传参(全局参数context)

我们知道props可以传递参数,但是需要一级一级地传递(A->B->C...),非常麻烦,这里提供一种用context实现跨级参数传递;

 Context属性的使用步骤
 [准备阶段]
 1.在产生的参数的最顶级组件中,使用childContextTypes静态属性来定义要放入全局参数的类型
 2.在父组件中,提供状态,来管理数据
 3.声明子组件获取全局参数的方式
 

import React, {Component} from 'react';
import {Image, Platform, StyleSheet, Text, View} from 'react-native';
import BComponent from "./BComponent";
import PropTypes from 'prop-types';


export default class ContainerComponent extends Component {
    static childContextTypes = {
        title: PropTypes.string,
    }


    //定义组件状态
    state = {
        title: "孙悟空",
    }

    //子组件获取方法
    getChildContext() {
        return {
            title: this.state.title,
        }
    }

    render() {
        return 
            
        
    }
}

import React, {Component} from 'react';
import {Image, Platform, StyleSheet, Text, View} from 'react-native';
import CComponent from "./CComponent";

export default class BComponent extends Component {
    render() {
        return 
            
        
    }
}

 在子组件中使用,使用contextTypes静态属性,声明需要获取父组件放入全局的context中的参数
 在子组件需要的地方,获取全局参数
 this.context.全局参数名

import React, {Component} from 'react';
import {Image, Platform, StyleSheet, Text, View} from 'react-native';
import PropTypes from 'prop-types';


export default class CComponent extends Component {

    static contextTypes = {
        title: PropTypes.string,
    }

    render() {
        return 
            this is CComponent {this.context.title}
        
    }
}