ReactNativeサブコントロールと親コントロールの間のメソッド呼び出し

親コントロールがMainであると仮定します。js、サブコントロールはJLTabBar.js

親コントロールのメソッドbtnClick 、 btn2Click
サブコントロールのメソッドbuttonClick

親コントロールがサブコントロールを呼び出す方法

親コントロールでサブコントロールにref="ref1"を設定し、buttonクリックイベントを設定します.buttonクリックイベントでthis.refs.ref1.buttonClick()を介してサブコントロールのメソッドを呼び出す

サブコントロール親コントロールを呼び出す方法

親コントロールにサブコントロールを埋め込むときに、サブコントロールにイベント属性を追加します.eg:
親コントロールにonPress={()=>this.btnClick()}およびonClick={()=>this.btn2Click()}イベントが追加されました

this.btnClick()} onClick={()=>this.btn2Click()}/>

次いで、親コントロールのthis.props.onPress();メソッドは、サブコントロールにおいて()=>this.btnClick()によって呼び出される.親コントロールをthis.props.onClick();で呼び出す()=>this.btn2Click()メソッド

サンプルコード

親コントロール

import React , {Component} from 'React';
import {TabBar, Icon, Button, Text} from 'antd-mobile';
import {
    Image,
    View,
    StyleSheet,
    Dimensions,
} from 'react-native';

//  TabBar
import JLTabBar from '../Widgets/JLTabBar'

//  
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

export default class Main extends Component{
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
            hidden: false,
            users:[],
            total_count:0
        };
        this.tabBarItemClick = this.tabBarItemClick.bind(this);
    }


    //  TabBarItem
    tabBarItemClick(){
        let request_url = "http://localhost:4010";

        fetch(request_url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                user_id: '5d038ad0-8166-11e7-af91-0ba3d316ba53',
                api_name: 'user.search_users',
            })
        }).then((response)=>response.json())
            .then((responseJson)=>{
            console.log({
                responseJson
            })
            this.setState({
                users:responseJson.response.datas,
                total_count:responseJson.response.total_count
            })
        }).catch((error)=>{
            console.error(error)
        })
    }


    btnClick(){
        console.log("btnClick ")
    }

    btn2Click(){
        console.log("btn2Click ")
    }


    render(){
        return(
            
                {/* */}
                {
                    console.log(123);
                    this.refs.ref1.buttonClick();
                }}>
                     
                

                {/* ， onPress onClick */}
                this.btnClick()} onClick={()=>this.btn2Click()}/>
            
        )
    }
}



const styles = StyleSheet.create({
    container:{
        height:Config.screenWidth,
        width:Config.screenHeight
    },
    tabbarStyle:{
        width:Config.screenHeight,
        height:50,
        marginBottom:0
    }
})

サブコントロール

/**
 * Created by yuanjunliang on 2017/8/19.
 */

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

import {TabBar, Icon} from 'antd-mobile';

export default class JLTabBar extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    //  
    buttonClick() {
        console.log("click ")
    }


    render() {
        return (
            
                {/* btnClick */}
                 {
                    this.props.onPress();
                }}>
                     
                

                {/* btn2Click */}
                 {
                    this.props.onClick();
                }}>
                     
                
            
        )
    }
}

const styles = StyleSheet.create({
    tabbarStyle:{
        backgroundColor:"blue",
        height:50,
        width:300
    }
})