DingdongRider/notice/TimScreen.tsx

import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { useNavigation } from '@react-navigation/native';
import { WebView } from 'react-native-webview';

import useModel from 'flooks';
import { useMount } from 'ahooks';

import IM from './model';

import { useTranslation } from 'react-i18next';

export default function NoticeScreen({
  navigation,
}: StackScreenProps<RootStackParamList, 'Login'>) {
  const { t } = useTranslation();
  const webRef = React.useRef();
  const {
    getChat,
    userID,
    userSig,
    tim,
    setTim,
    initChat,
    updateChatInfo,
  } = useModel(IM, ['userID', 'userSig', 'tim']);
  useMount(() => {
    initChat();
  });

  React.useEffect(() => {
    if (userSig && tim)
      tim.injectJavaScript(
        `window.chatLogin(${JSON.stringify(userID)},${JSON.stringify(userSig)})`
      );
  }, [userSig, tim]);

  return (
    <WebView
      ref={webRef}
      source={{
        uri: `http://dingdong.izouma.com/map/tim`,
      }}
      onMessage={({ nativeEvent }) => {
        console.log(nativeEvent);
        const info = JSON.parse(nativeEvent.data);
        switch (info.name) {
          case 'onConversationListUpdated':
            getChat();
            break;

          default:
            break;
        }

        if (info.conversationType === 'C2C') {
          updateChatInfo(info);
        }
      }}
      onLoadEnd={() => {
        setTim(webRef.current);
      }}
    />
  );
}