我們知道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 <View>
            <BComponent/>
        </View>
    }
}
 

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 <View>
            <CComponent/>
        </View>
    }
}
 

 在子元件中使用,使用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 <View>
            <Text>this is CComponent {this.context.title}</Text>
        </View>
    }
}