スプラッシュ画面/起動画面のようなものを作成する方法は、アプリケーションの読み込み後に消えますか？ （React Native）

Question

私は起動画面を解決する方法を知りました。それは数秒間表示され、次に別の表示に置き換えられるとしますか？

アプリを初めて起動して一部のネットワークをカバーするときに、この機能を使用したいと考えています。

Answer 1

（時間の確定額に対して実行アクティビティを起動する）古いスタイルを使用していた場合は、作られた可能性があり、すべてのUI成果物を避ける必要がありwindowBackground属性を活かし

Loading Screen。 Navigator Componentで作業しました。私index.android.jsで

私は私のSplashPage /スプラッシュクラスにinitialRouteを設定し、そこに私はあなたが一定時間後にジャンプしたいMAINVIEWにリンクタイムアウトを設定します。 index.android.jsで

マイナビゲーター：

<Navigator 
    initialRoute={{id: 'SplashPage'}} 
    renderScene={this.renderScene} 
    configureScene={(route) => { 
     if (route.sceneConfig) { 
      return route.sceneConfig; 
     } 
     return Navigator.SceneConfigs.HorizontalSwipeJump; 
    }} 
/> 

マイinitialRouteクラス：それは "ですので

はもっと面白いかもしれません

class SplashPage extends Component { 

    componentWillMount() { 
     var navigator = this.props.navigator; 
     setTimeout (() => { 
      navigator.replace({ 
       id: 'MainView', <-- This is the View you go to 
      }); 
     }, 2000); <-- Time until it jumps to "MainView" 
    } 
    render() { 
     return (
      <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}> 
       <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image> 
      </View> 
     ); 
    } 
} 

module.exports = SplashPage; 

EDITネイティブ ";） https://github.com/crazycodeboy/react-native-splash-screen

Answer 2

Thisが正しい方法です。私は解決どのようにこれは

Answer 3

この問題は修正されました。 何をする必要があります。

1）thisからすべてを作成しますが、SplashActivityを作成しないでください。

2）あなたが今行うべきことは、MainActivityテーマをSplashThemeに設定することです。

MainActivityがテーマを表示しているときにそれがテーマを示しているが、React-Nativeのものに置き換えられたときのこと。

Answer 4

私は、最も簡単なように見え、より少ないリソースを必要とする、このようにそれを行うために管理：

1. は異なる解像度のスプラッシュイメージを作成します。私はionic resourcesを使ってPSDファイルからすべてのサイズを生成しました。 ionic startで一時的なイオンプロジェクトを作成し、/ resources内のPSDファイルを編集し、ionic resourcesを実行する必要があります。

2. アプリ/ srcに/メイン/ resを/ミップマップ-XXXにおける適切なフォルダに配置し、それらを、名前が

3. をic_splash.pngでアプリ/ srcに/メイン/ resを/描画可能/スプラッシュを作成します。このコンテンツのxml： <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_splash"/> </item> </layer-list> 注：ビットマップアイテムの下に色を追加する必要があるように見えるので、<item>の前に<item android:drawable="@android:color/black"/>を追加するだけです。あなたのスプラッシュイメージが透明でない限り、色は本当に重要ではありません。

4. アプリ/ srcに/メイン/ RES /値/のstyles.xmlに入れる：今すぐアプリが起動します <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> </style>
5. 編集アプリ/ srcに/メイン/ AndroidManifest.xmlを、アプリケーション内でinclude>の活動android:theme="@style/SplashTheme"
6. React Nativeアプリが読み込まれると直ちにその画面の上に配置されます。リアクションネイティブのメインコンポーネントには、スプラッシュイメージが表示されるような背景が必要です。