Блог

Я новичок в react и, по сути, использую Expo для создания приложения. Я выбрал настройку TypeScript с вкладками и навигатором, уже реализованными при запуске «expo init NewApp». У меня просто есть экран перехода, который я хочу отобразить на несколько секунд, прежде чем перейти к корню приложения, который является просто компонентом, уже предоставленным мне Expo (из шаблона, он содержит tabonescreen.tsx и tabtwoscreen.tsx ).

Однако я не уверен, как создать новый навигатор стека, и я считаю, что это излишне для данной ситуации.

Что мне делать? Как мне перейти к корню после отображения перехода:

App.tsx

 import React, { useState } from 'react';
import useCachedResources from './hooks/useCachedResources';
import TransitionScreen from './screens/TransitionScreen';


// A root stack navigator is often used for displaying modals on top of all other content
// Read more here: https://reactnavigation.org/docs/modal
export default function App() {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      
      <TransitionScreen/>
    );
  }
}

 

TransitionScreen.tsx

 import React from 'react';
import {StyleSheet, View, Image } from 'react-native';

export default function TransitionScreen() {
    return(
      <View style={styles.container}>
        <Image
          style={styles.calpalLogo}
          source={require('../assets/images/calpal.png')}
        />  
        {
            setTimeout(() => {
                //GO TO tabonescreen.tsx/root of the app
            }, 5000)
        }
      </View>
    )
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#FAFAFA',
      alignItems: 'center',
      justifyContent: 'center',
    },
    calpalLogo: {
      width:'100%',
      height:'60%',
    }
  });
  

 

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

 export default function App() {
  const isLoadingComplete = useCachedResources();

  if (!isLoadingComplete) {
    return <YourNavigator/>;
  } else {
    return (
      
      <TransitionScreen/>
    );
  }
}