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应用之间的过渡并不顺利。

基本上，您需要

创建启动屏幕资产（有关更多信息，请参见this tutorial）
添加上述npm模块
像这样在PersistGate的load属性中传递您已经创建的SplashScreen：loading = {SplashScreen}
您创建的SplashScreen组件不需要渲染任何东西，您都可以在组件上隐藏本机启动屏幕卸载

componentWillUnmount（）{ SplashScreen.hide（）; }

反应本机启动画面

2 个答案: