如何在React中啓動啓動畫面

Question

我是React Native的初學者，並且使用它構建混合應用程序。 但我不知道如何在我的應用程序中創建啓動畫面。

博客中沒有任何完整的代碼。

請爲我提供啓動畫面的指導或完整代碼。

謝謝。

Answer 1

有兩種方法可以解決它。

1. 通過本機代碼自己實現它。
2. 使用react-native包來處理它。

如果你自己實現它，你可以使用這些資源：

• Stack Overflow Answer on how to implement Splash screens for iOS
• Big Nerd Ranch Tutorial for Android Splash Screen

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