反应原生闪屏答案

【问题标题】：React Native Splash Screen反应原生闪屏
【发布时间】：2019-05-15 14:14:03
【问题描述】：

我正在尝试创建一个在应用启动时首先加载的启动画面。我正在使用 redux persist 创建它。初始状态是启动画面。 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>
    );
  }
}

【问题讨论】：

标签： react-native splash-screen

【解决方案1】：

只需将 SplashScreen 组件设置为 loading 属性即可。

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

【讨论】：

【解决方案2】：

我的意见是，您应该在需要时使用react-native-splash-screen 之类的模块来隐藏本机启动画面。这将在启动您的应用程序时为您提供更流畅的结果，因为用户只会看到启动屏幕，然后是您的反应本机应用程序，而在您当前的方式中，用户会看到默认启动屏幕，然后是白屏，然后是您的 Splash屏幕。我知道这不是它应该如何工作的，但不幸的是，启动屏幕和 react native 应用程序之间的过渡一点也不顺畅。

基本上你需要

创建启动屏幕资产（有关详细信息，请参阅this tutorial）
添加上面提到的 npm 模块
传递您已经在 PersistGate 加载属性中创建的 SplashScreen，如下所示：loading={SplashScreen}
你创建的 SplashScreen 组件不需要渲染任何东西，您都可以在组件上隐藏本机启动画面卸载

componentWillUnmount() { SplashScreen.hide(); }

【讨论】：