# React Native 跟原生之间的通信

import { Platform, DeviceEventEmitter, NativeEventEmitter } from 'react-native';
const PLAN_EVENT_MAP = {
  // 修改计划成功事件
  PlanChangeSuccess: 'PlanChangeSuccess',
};

const FOO = (props) => {
  // 修改成功后刷新详情页的事件管理中心ref
  const eventReloadRef = useRef();
  // 初始化获取数据
  const getInitialDetail = () => {};
  useEffect(() => {
    getInitialDetail();
    () => {
      // 移除监听原生的事件
      eventReloadRef.current && eventReloadRef.current.remove();
    };
  }, []);

  /**
   * 监听原生发送的事件(全局)
   */
  useEffect(() => {
    // Android 端
    if (Platform.OS === 'android') {
      eventReloadRef.current = DeviceEventEmitter.addListener(
        PLAN_EVENT_MAP.PlanChangeSuccess,
        (success) => {
          console.log('android PlanChangeSuccess', success);
          // 更新完重新加载数据
          success && getInitialDetail();
        }
      );
    }
    // iOS 端
    if (Platform.OS === 'ios') {
      const EventEmitterManager = NativeModules.VKReactEventEmitter;
      if (EventEmitterManager) {
        const navigationEmitter = new NativeEventEmitter(EventEmitterManager);
        eventReloadRef.current = navigationEmitter.addListener(
          PLAN_EVENT_MAP.PlanChangeSuccess,
          (success) => {
            console.log('ios PlanChangeSuccess', success);
            // 更新完重新加载数据
            success && getInitialDetail(planId);
          }
        );
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
};

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import HomePage from '../pages/home';
const routes = {
  HomePage: {
    screen: HomePage, //Tab作为Stack路由
  },
};
class Routers extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // 说明是原生加载的RN Bundle
    if (this.props.routerName) {
      // 根据原生传入的routerName来初始化路由页面
      options.initialRouteName = this.props.routerName;
      const keys = Object.keys(routes);
      keys.forEach((key) => {
        routes[key].params = {};
      });
      routes[this.props.routerName].params = {
        // 只要是原生加载的RN Bundle，那当前就是原生环境
        isNative: true,
        // 接收原生传入的其他属性，一一赋值到当前路由的params属性中
        ...this.props,
      };
    }
    const StackNavigator = createAppContainer(
      createStackNavigator(routes, options)
    );
    return <StackNavigator />;
  }
}

import { NativeModules } from 'react-native';
function getNativeModuleParams(props) {
  const { state = {} } = props.navigation || {};
  const { params = {} } = state;
  // 这个select_content是跟原生约定好的参数名称，值是一个json字符串，因为原生发送json对象会有问题
  const { nativeParams = '{}', ...rnParams } = params;
  const nativeModuleParams = JSON.parse(nativeParams);
  return {
    rnParams,
    nativeModuleParams,
  };
}

const Page = (props) => {
  // 获取原生传过来的数据是序列化的对象, 已经反序列化
  const { nativeModuleParams = {}, rnParams = {} } =
    getNativeModuleParams(props) || {};
  const { isNative } = rnParams || {};
  // 参数名称跟原生约定好
  let {
    nativeParams, // 原生传入的参数
    nativeMethod, // 原生传入的方法
    moduleName,
  } = isNative ? nativeModuleParams : rnParams; // isNative ? 原生跳转传递过来的参数 : RN跳转传递过来的参数
};

const handleMethod = useCallback(() => {
  // 调用原生传入的方法
  // 这个nativeMethod是原生定义的方法名的一个key，具体指向哪个方法是原生那边定义的，因此需要[]来获取
  if (NativeModules[moduleName] && NativeModules[moduleName][nativeMethod]) {
    NativeModules[moduleName][nativeMethod]({
      nativeParams,
    });
  }
}, [nativeMethod, moduleName, nativeParams]);