React-Native — Как преобразовать JS в TS, используя объявление функционального компонента (FC)?

Я должен реализовать реализацию Pendo React Native в TypeScript. Мой App.tsx имеет следующий код, который необходимо изменить, чтобы приспособить к нему методы Pendo:

Текущее приложение в ТС:

      export const App: FC = () => {
  const [isInitialized, setInitialized] = useState<boolean>(false);

  useEffect(() => {
    const init = async () => {
        ... some code ...
    };
    init();
  }, []);

  return (
    <SafeAreaProvider>
      {isInitialized ? (
            <NavigationContainer
              theme={combinedTheme}
              linking={linking}
              onReady={SplashScreen.hide}
            >
              ... code ....
            </NavigationContainer>
      ) : null}
    </SafeAreaProvider>
  );
};

Предлагаемая реализация Pendo в JS:

Реализация Pendo реализована на JavaScript, и мне не удалось найти собственное определение типа для библиотеки. Вот соответствующий сегмент в документации для инициализации Pendo в React Native с React Navigation:

      import {withPendoRN} from 'rn-pendo-sdk'
import {useRef} from 'react';

function RootNavigator(props) {
  const navigationRef = useRef();
  return (
    <NavigationContainer 
      ref={navigationRef}
      onStateChange={()=> {
        const state = navigationRef.current.getRootState()
        props.onStateChange(state);
      }} 
      onReady ={()=>{
        const state = navigationRef.current.getRootState()
        props.onStateChange(state);
      }}>
      {MainStackScreen()}
    </NavigationContainer>
  )
};

export default withPendoRN(RootNavigator);

Мое модифицированное приложение в TS:

Как я могу изменить свой существующий код, чтобы интегрировать в него Pendo? Это то, что я сделал до сих пор дляApp.tsxфайл:

      export const App1 FC = () => {
  const [isInitialized, setInitialized] = useState<boolean>(false);

  useEffect(() => {
    
    const init = async () => {
       ... code ...
    };

    init();
  }, []);

  const navigationRef = useRef<any>();
  return (
    <SafeAreaProvider>
      {isInitialized ? (
            <NavigationContainer
              ref={navigationRef}
              theme={combinedTheme}
              linking={linking}
              onStateChange={()=> {
                const state = navigationRef.current.getRootState()
                prop.onStateChange(state);
                console.log(Children);
              }} 
              onReady ={()=>{
                const state = navigationRef.current.getRootState()
                props.onStateChange(state);
                SplashScreen.hide;
              }}
            >
               ... code ...
            </NavigationContainer>
      ) : null}
    </SafeAreaProvider>
  );
};

export const App = withPendoRN(App1,null);

Мои основные вопросы:

  1. МойApp()обеспечивает эквивалентную реализациюfunction RootNavigator(props) из инструкций Пендо?
  2. Моя реализация дляonStateChange()иonReady()соответствует инструкциям Пендо?
  3. Есть ли реализация Pendo React Native, доступная в TypeScript, которую я могу просмотреть?

Когда я запускаю приложение в эмуляторе, оно не вылетает и не регистрирует никаких ошибок, однако в моих журналах отсутствуют сообщения о запуске Pendo, подтверждающие его действительную установку.

0 ответов

Другие вопросы по тегам