反应本机启动画面

Question

我正在尝试创建启动应用程序时首先加载的启动屏幕。 我正在用reduxpersist创建它。 初始状态为启动屏幕 。 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>
    );
  }
}

Answer 1

只需将SplashScreen组件设置为加载道具即可。

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

Answer 2

我的意见是，您应在需要时使用诸如react-native-splash-screen之类的模块隐藏本机启动屏幕。 这将在启动应用程序时为您提供更加平滑的结果，因为用户将仅看到启动屏幕，然后才是您的本机应用程序，而按照当前的方式，用户将看到默认的启动屏幕，然后是白色屏幕，然后是您的Splash。屏幕。 我知道这不是它应该如何工作的方法，但是不幸的是，启动屏幕和react native应用之间的过渡并不顺利。

基本上你需要

1. 创建启动屏幕资产（有关更多信息，请参阅本教程 ）
2. 添加上述的npm模块
3. 像下面这样在PersistGate的load属性中传递您已经创建的SplashScreen：loading = {SplashScreen}

4. 您创建的SplashScreen组件不需要渲染任何东西，您可以在卸载组件时隐藏本机启动屏幕

   componentWillUnmount（）{SplashScreen.hide（）; }