ReactNative子控件与父控件之间的方法调用

假设父控件为Main.js，子控件为JLTabBar.js

父控件中的方法

btnClick、btn2Click

子控件中的方法

buttonClick

父控件调用子控件中的方法

在父控件中给子控件设置ref="ref1",然后设置button点击事件。在button点击事件中通过this.refs.ref1.buttonClick()来调用子控件中的方法

子控件调用父控件中的方法

在父控件中嵌套子控件的时候，给子控件添加事件属性，
eg:

在父控件中给子控件添加了onPress={()=>this.btnClick()} 和onClick={()=>this.btn2Click()}事件

<JLTabBar style={styles.tabbarStyle} ref="ref1" onPress={()=>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(
            <View style={styles.container}>
                {/*父控件调用子控件的方法*/}
                <Button title="点击测试" onClick={()=>{
                    console.log(123);
                    this.refs.ref1.buttonClick();
                }}>
                    点击父控件调用子控件的方法
                </Button>

                {/*子控件调用父控件的方法，在父控件中实现onPress和onClick方法*/}
                <JLTabBar style={styles.tabbarStyle} ref="ref1" onPress={()=>this.btnClick()} onClick={()=>this.btn2Click()}/>
            </View>
        )
    }
}



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 (
            <TabBar style={styles.tabbarStyle}>
                {/*子控件调用父控件的btnClick方法*/}
                <TabBar.Item title="首页" key="首页" onPress={() => {
                    this.props.onPress();
                }}>
                    首页
                </TabBar.Item>

                {/*子空间调用父控件的btn2Click方法*/}
                <TabBar.Item title="主页" key="主页" onPress={() => {
                    this.props.onClick();
                }}>
                    首页
                </TabBar.Item>
            </TabBar>
        )
    }
}

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