Как добавить заставку?

Question

Я хочу добавить заставку в мой код до того, как появится HomeScreen.

Это мой новый файл Splashscreen.js

import React from 'react';
import { StatusBar, View, Text, ActivityIndicator } from 'react-native';
import HomeScreen from './screens/HomeScreen.js';

export default class SplashScreen extends React.Component {

    render() {
        return(

            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content" />
                <Text style={{ color: 'white', fontSize: 18}}>WELCOME</Text>
                <ActivityIndicator color={'white'} />
            </View>,

        );
    }
}

Это мой новый файл App.js

  import React, {Component} from 'react';
import { Keyboard, Alert } from 'react-native';
import {createAppContainer, createStackNavigator} from 'react-navigation';
import HomeScreen from './screens/HomeScreen.js';

/** Importing navigator */
import AppDrawerNavigator from './drawerNavigator';

/** Redux **/
import { createStore } from 'redux';

import { Provider } from 'react-redux';
import SplashScreen from './screens/SplashScreen.js';

const initialState = {
    username: null,
    password: null,
};



const reducer = (state=initialState, action) => {
    if(action.type) {
        console.log('NEW',action.name);
    }
    return {state, username: action.name, password: action.pass};
}

const store = createStore(reducer);

class App3 extends React.Component {

    componentWillMount() {
        this.state = {
            view: <SplashScreen />
        };

        setTimeout(() => {
            this.setState({
                view: <HomeScreen />
            })
        }, 2000)
    }

    render() {
      return (
        // this.state.view,
        <Provider store = {store}>
            <AppContainer />
        </Provider>

      );
    }
}

export default App3;



const AppStackNavigator = createStackNavigator(
  {

    Home: {
        screen: HomeScreen
    },
    Welcome: {
        screen: AppDrawerNavigator
    }
  },
  {
    initialRouteName: 'Home',
    headerMode: "none",
  }
);

const AppContainer = createAppContainer(AppStackNavigator);

Если вы хотите проверить мои другие экраны и файлы, вы можете проверить эту ссылку .

Я хочу добавить созданный мной файл заставки в существующий код, не затрагивая существующие функции. Я хочу добиться следующих вещей:

• Открыть приложение
• Показывать заставку в течение секунды.
• Перейдите на экран входа в систему, если не вошли в систему, прежде чем перейти на экран приветствия прямо из заставки

Answer 1

Я бы порекомендовал вам взглянуть на среднюю статью Спенсера Кали.Это шаг за шагом добавляет экран-заставку для приложений RN. Как добавить заставку в собственное приложение React (iOS и Android)

Answer 2

Заставка и экран загрузки разные.Заставка отображается, когда приложение открыто из состояния завершения.

После этого некоторые приложения отображают экраны загрузки для обработки фоновой логики, такие как проверка входа пользователя, получение данных и так далее.

В вашем случае вы видите экран загрузки потоков аутентификации.

Используйте эти способы. React Navigation Auth потоков

Этот поток, как показано ниже.

1. Показать экран загрузки и проверить пользователя auth

2. перейти к другому экрану в соответствии с результатом аутентификации.

if (loggedIn) { this.props.navigation.navigate('SignUpScreen') } 
else { this.props.navigation.navigate('HomeScreen') }

Happy!

И если вы хотите использовать заставку, а не экран загрузки, я рекомендую использовать rn-toolbox .

Answer 3

Для реактивной системы вам не нужно создавать файл для заставки.

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

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

act-native-splash-screen

Вы можете найти все детали здесь и следовать им шаг за шагом, это поможет вам.это всегда помогает мне!