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);
Мои основные вопросы:
- Мой
App()
обеспечивает эквивалентную реализациюfunction RootNavigator(props)
из инструкций Пендо? - Моя реализация для
onStateChange()
иonReady()
соответствует инструкциям Пендо? - Есть ли реализация Pendo React Native, доступная в TypeScript, которую я могу просмотреть?
Когда я запускаю приложение в эмуляторе, оно не вылетает и не регистрирует никаких ошибок, однако в моих журналах отсутствуют сообщения о запуске Pendo, подтверждающие его действительную установку.