React Native Splash Screen - PullRequest
Новая
       35

React Native Splash Screen

0 голосов
/ 14 декабря 2018

Я пытаюсь создать заставку, которая загружается первой при запуске приложения.Я создаю его с сохранением.Исходное состояние - Заставка .Splash имеет функцию, чтобы проверить, работает ли он впервые. setTopLevelNavigator перенаправляет на постоянный экран.После заставки он должен перейти к сохраненному экрану.Я не уверен, как я могу реализовать загрузку заставки в первую очередь.Любая помощь будет отличной! 

render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppWithNavigationState
            ref={ref => setTopLevelNavigator(ref)}
          />
        </PersistGate>
      </Provider>
    );
  }

Это заставка 

class SplashScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),
    };
  }

  async componentDidMount() {
    const {
      settings,
      navigation,
    } = this.props;
    if (settings.firstRun) {
      const { fadeAnim } = this.state;
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 2000,
        },
      ).start();
    } else {
      const { fadeAnim } = this.state;
      fadeAnim.setValue(1);
      Animated.timing(
        fadeAnim,
        {
          toValue: 0.01,
          duration: 1000,
          easing: Easing.inOut(Easing.ease),
        },
      ).start();

      setTimeout(() => {
        navigation.replace('Home');
      }, 1000);
    }
  }

  onScroll =() => {
    const { navigation } = this.props;
    navigation.navigate('Intro');
  }


  render() {
    const { fadeAnim } = this.state;
    return (
      <TouchableWithoutFeedback
        onPress={this.onScroll}
      >
        <View style={styles.container}>
          { Platform.OS === 'ios'
            ? <StatusBar barStyle="light-content" />
            : <StatusBar hidden />
          }
          <ScrollView
            horizontal
            onMomentumScrollBegin={this.onScroll}
          >
            <AnimateImage
              fadeAnim={fadeAnim}
            />
          </ScrollView>

        </View>
      </TouchableWithoutFeedback>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Мое мнение таково, что вы должны использовать такой модуль, как act-native-splash-screen , чтобы при необходимости скрыть собственный экран-заставку.Это даст вам намного более плавный результат при запуске вашего приложения, потому что пользователь увидит только экран запуска, а затем ваше собственное приложение, в то время как при вашем текущем способе пользователь видит экран запуска по умолчанию, затем белый экран и затем ваш Splash.экран.Я знаю, что это не так, как должно работать, но переход между экраном запуска и собственным приложением реакции, к сожалению, не совсем гладкий.

В основном вам необходимо

  1. Создать ресурсы экрана запуска (для получения дополнительной информации см. это руководство )
  2. Добавьте упомянутый выше модуль npm.
  3. Передайте SplashScreen, который вы уже создали в атрибуте загрузки PersistGate, следующим образом: loading = {SplashScreen}

  4. Компонент SplashScreen, который вы создали, не должен ничего визуализировать, и вы можете его скрытьсобственный экран-заставка для размонтирования компонента

    componentWillUnmount () {SplashScreen.hide ();}

0 голосов
/ 14 декабря 2018

Просто установите компонент SplashScreen для загрузки. 

<PersistGate loading={<SplashScreen />} persistor={persistor}>
...