Блог

Я запускаю приложение, и на данный момент у меня есть два представления: одно называется Splash, а другое называется Home. Бывает, что, когда заставка заканчивается, она приводит меня к домашнему просмотру, но в этом представлении пользователь нажимает кнопку назад, приложение снова показывает мне заставку. Есть ли способ избежать этого? идея заключается в том, что, находясь в домашнем представлении, невозможно откатить приложение.

MainStackNavigator.js

 import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import Splash from '../views/Splash/Splash';
import Home from '../views/Home/Home';

const Stack = createStackNavigator()

function MainStackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Splash' component={Splash} options={{ headerShown: false}} />
        <Stack.Screen name='Home' component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MainStackNavigator
  

Splash.js

 import React, { Component } from 'react'
import { View, ImageBackground, Image } from 'react-native'

// import SplashContext from '../../state/splashContext'

var bg = require('../../../assets/img/bg.png');
var logo = require('../../../assets/img/logo.png')

export default class Splash extends Component {  
 
    constructor(props) {
        super(props);
        setTimeout(() => {
            this.props.navigation.navigate("Home");    
        }, 500)    
    }    
    render() {
        return (
            <ImageBackground
                source={bg}
                style={{ height: '100%', width: '100%' }}>
                <View
                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={logo}
                        style={{ height: 100, width: 100 }}
                    >
                    </Image>
                </View>
            </ImageBackground>    
        );
    }    
}
  

Home.js

 import React, { Component } from 'react'
import { View, Text } from 'react-native'   

export default class Splash extends Component {
    render() {
        return (
            <View
                style={{ flex: 1, padding: 10, alignItems: 'center', justifyContent: 'center' }}
            >
                <Text
                    style={{ fontSize: 30 }}
                >Homse</Text>
            </View>    
        );
    }    
}
  

App.js

 import React from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator'
const App: () => React$Node = () => {
  return (
   <MainStackNavigator></MainStackNavigator>
  );
};

export default App;
  

Использование «navigate» приведет к переходу на следующую страницу, добавив ее в навигатор стека. Вместо этого вы хотите заменить текущую страницу (заставку) домашней страницей. Это можно сделать с помощью replace функции

 this.props.navigation.replace("Home");  
  

См. https://reactnavigation.org/docs/navigation-prop /

Вы могли бы использовать модальное отображение заставки на одном экране во время загрузки информации вместо двух разных представлений. Иметь переменную «loading» в состоянии представления, инициализированную как «true». Эта переменная будет логическим значением «видимости» для вашего модального. После того, как все загрузится, измените переменную «loading» на «false».

Вот пример с хуком «useState»:

 const [isLoading, setIsLoading] = useState(true);
const loadInfo = async () => {
   /*do your stuff*/
   /*after stuff's done*/
   setIsLoading(false);
};
if (isLoading) {
    return (
        <MySplashScreenModal/>
    );
} else {
    return (
        <MyHomeScreen/>
    );
}
  

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

Я использовал этот плагин для своего приложения для Android и ios для заставки, и он работает отлично и плавно. Я рекомендую всем

React native загрузочная панель для заставки