Question

我是React Native的初学者并使用它构建混合应用程序。但我不知道如何在我的应用程序中创建启动画面。

任何博客中都没有完整的代码。

请向我提供启动画面的指南或完整代码。

谢谢。

Answer 1

有两种方法可以解决这个问题。

通过本机代码自行实现。
使用可以为您处理它的react-native软件包。

如果您自己实施，可以使用以下资源：

Answer 2

我在我的应用程序中创建了一个非常简单的启动画面，基本上只是一个全屏图像组件，只要我的初始化正在运行（登录状态等），我就会从主应用程序逻辑调用。我在下面举例说明了一个简单的setTimeout。您可以通过添加微调器或动画来进一步改善启动画面;或者查看社区创建的组件或包。

<强>溅射屏幕

var SplashScreen = React.createClass({
  getInitialState() {
    return {
      image: 'splash'
    }
  },

  render: function(){
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={{uri: this.state.image}} resizeMode="cover" />
      </View>
    )
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1
  }
});

主要应用

getInitialState: function() {
   return {renderSplashscreen: true}
},

componentDidMount: function() {
   setTimeout(() => this.setState({renderSplashscreen: false}), 3000)
},

render: function() {
    if (this.state.renderSplashscreen) {
      return (<SplashScreen />)
    }
    return (<MainApp />    
}

Answer 3

我为自适应启动画面创建了一个小指南希望它有所帮助

https://github.com/hiteshsahu/ReactNative-Adaptive-Splash-Screen-Android/blob/master/README.md

如何在React中启动启动画面

3 个答案: