の中でMixPanelの反応API

7977 ワード
react analytics mixpanel reactnative テキストリンク
私は最近Mixpanelに遭遇しました.そして、あなたが使用するスタックに関係なくあなたのプロジェクトで速く実行する素晴らしい分析サービスとして.
しかし、彼らのRNの例はクラスを使用しています、そして、私は彼らのアプリの例が少し混乱していて全く乾燥していなかったように感じました.そして、私は、これがコミュニティとMixPanelチームと共有する価値があるように感じました.
ContextAPI
1 .消費者とプロバイダの作成
import React from 'react';
import {Mixpanel} from 'mixpanel-react-native';

export const MixpanelContext = React.createContext();

export const MixpanelProvider = ({children}) => {
  const [mixpanel, setMixpanel] = React.useState(null);

  React.useEffect(() => {
    const initMixpanel = async () => {
      const initializedMixpanel = await Mixpanel.init('your token');
      initializedMixpanel.serverURL = 'https://api-eu.mixpanel.com'; // if needed
      setMixpanel(initializedMixpanel);
    };

    initMixpanel();
  }, []);

  return <MixpanelContext.Provider value={mixpanel}>{children}</MixpanelContext.Provider>;
};

アプリケーションコンポーネントをラップする
グローバルにコンテキストにアクセスできるようにします.
import React from 'react';
import {MixpanelProvider} from 'path.../AnalyticsService';

const App = () => {
  return (
          <MixpanelProvider>
            {children}
          </MixpanelProvider>
  );
};

export default App;

3 .任意のコンポーネントでコンテキストを消費する
import React from 'react';
import {Text, TouchableOpacity, View} from 'react-native';
import {MixpanelContext} from 'path.../AnalyticsService';

//simple example to get the point, customize it however you want

export const SomeComponent = () => {
  const mixpanel = React.useContext(MixpanelContext);
  return (
    <View>
          <TouchableOpacity onPress={() => mixpanel.track('Testing mixpanel')}>
            <Text>Test mixpanel</Text>
          </TouchableOpacity>
        )}
    </View>
  );
};
それが役に立つことを望みます.私は、私が反応docsがよく説明されているように感じたので、私はnitsとgritsに深く行きませんでした、そして、あなたは同様に話題の上で多くの素晴らしいと無料のビデオを見つけることができます.
それにもかかわらず、疑問がある場合は私に知らせてください.
また、私に連絡することができます
2. Add Two Numbers
ネットワークデバイス制御用の抽象API 2:コマンド入力前後モードで移動