React Native：父组件调用方法及封装react-native-easy-toast调用问题

我来帮你搞定这两个React Native开发里的常见问题，都是关于组件间方法调用的，一步步来哈～

1. 父组件如何调用子组件的方法？ #

不管是类组件还是函数式组件，都有对应的实现方式，我分别给你举例子：

类组件场景 #

• 首先在子组件里定义好要被调用的方法：

class ChildComponent extends React.Component {
  // 子组件的方法
  childMethod() {
    console.log('子组件的方法被父组件调用啦！');
  }

  render() {
    return <View />;
  }
}

• 然后在父组件里给子组件加个ref，通过ref拿到子组件实例，就能调用方法了：

class ParentComponent extends React.Component {
  // 调用子组件方法的函数
  callChildMethod() {
    this.childRef.childMethod();
  }

  render() {
    return (
      <View>
        {/* 通过ref绑定子组件实例 */}
        <ChildComponent ref={(ref) => this.childRef = ref} />
        <Button title="触发子组件方法" onPress={() => this.callChildMethod()} />
      </View>
    );
  }
}

函数式组件场景 #

函数式组件需要用到forwardRef和useImperativeHandle来暴露内部方法：

import React, { forwardRef, useImperativeHandle } from 'react';
import { View, Button } from 'react-native';

// 用forwardRef包裹子组件，接收ref参数
const ChildComponent = forwardRef((props, ref) => {
  const childMethod = () => {
    console.log('函数式子组件的方法被调用啦！');
  };

  // 把要暴露的方法绑定到ref上
  useImperativeHandle(ref, () => ({
    childMethod
  }));

  return <View />;
});

// 父组件里使用
const ParentComponent = () => {
  const childRef = React.useRef(null);

  const callChildMethod = () => {
    childRef.current.childMethod();
  };

  return (
    <View>
      <ChildComponent ref={childRef} />
      <Button title="调用子组件方法" onPress={callChildMethod} />
    </View>
  );
};

2. 封装可复用的react-native-easy-toast组件后，如何调用show方法？ #

你已经有了Toast的基础配置，只需要把它封装成组件，然后把show方法暴露给外部调用就行，同样分两种组件类型举例：

类组件封装方式 #

import React, { Component } from 'react';
import Toast from 'react-native-easy-toast';

class CustomRedToast extends Component {
  // 封装一个show方法，内部调用Toast的show
  showToast = (message) => {
    this.toastRef.show(message);
  };

  render() {
    return (
      <Toast
        ref={(ref) => this.toastRef = ref}
        style={{ backgroundColor: 'red' }}
        position='top'
        positionValue={10}
        fadeInDuration={750}
        fadeOutDuration={2000}
        opacity={0.8}
        textStyle={{ color: 'white' }}
      />
    );
  }
}

export default CustomRedToast;

然后在页面里使用这个封装好的Toast，通过ref调用show方法：

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import CustomRedToast from './CustomRedToast';

class HomePage extends Component {
  showErrorToast = () => {
    // 调用封装组件的showToast方法
    this.toastRef.showToast('hello world!');
  };

  render() {
    return (
      <View>
        <Button title="显示红色提示" onPress={this.showErrorToast} />
        <CustomRedToast ref={(ref) => this.toastRef = ref} />
      </View>
    );
  }
}

函数式组件封装方式 #

如果你的项目用函数式组件更多，这样写更合适：

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import Toast from 'react-native-easy-toast';

const CustomRedToast = forwardRef((props, ref) => {
  const toastRef = useRef(null);

  const showToast = (message) => {
    toastRef.current.show(message);
  };

  // 暴露showToast方法给外部
  useImperativeHandle(ref, () => ({
    showToast
  }));

  return (
    <Toast
      ref={toastRef}
      style={{ backgroundColor: 'red' }}
      position='top'
      positionValue={10}
      fadeInDuration={750}
      fadeOutDuration={2000}
      opacity={0.8}
      textStyle={{ color: 'white' }}
    />
  );
});

export default CustomRedToast;

// 函数式页面组件使用
const HomePage = () => {
  const toastRef = useRef(null);

  const showErrorToast = () => {
    toastRef.current.showToast('hello world!');
  };

  return (
    <View>
      <Button title="显示红色提示" onPress={showErrorToast} />
      <CustomRedToast ref={toastRef} />
    </View>
  );
};

这样不管哪个页面需要这个红色Toast，直接引入组件，通过ref调用showToast方法就行，完美实现复用～

内容的提问来源于stack exchange，提问作者Shemeer M Ali