web-dev-qa-db-ja.com

React Native For Android

これからインストールしたデフォルトの反応ネイティブプロジェクトがあります turorial と this tutorial を使用してプロジェクトにスプラッシュスクリーンを追加しました。しかし、今私は得ます：

  • 0.5秒のスプラッシュスクリーンの写真
  • その後、1.5秒の白い画面
  • その後、私のアプリが起動し、

この問題を解決するための最良かつ最も標準的な方法は何ですか？スプラッシュスクリーンが1秒間必要で、その後アプリが起動するはずです。より多くの記事が、私は反応ネイティブの修正を見つけることができませんでした。

<application
  Android:name=".MainApplication"
  Android:allowBackup="true"
  Android:label="@string/app_name"
  Android:icon="@mipmap/ic_launcher"
  Android:theme="@style/AppTheme">
  <activity
    Android:name=".SplashActivity"
    Android:label="@string/app_name"
    Android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    Android:windowSoftInputMode="adjustResize"
    Android:theme="@style/SplashTheme">
    <intent-filter>
        <action Android:name="Android.intent.action.MAIN" />
        <category Android:name="Android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity Android:name=".MainActivity" />
  <activity Android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
react-nativesplash-screen
8
Sedric Heidarizarei

最初：
実行npm i react-native-splash-screen --save

2番目のステップ（プラグインのインストール）：
自動インストール

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

手動インストール
Android：
1：Android/settings.gradleファイルで、次の追加を行います。

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/Android')

2：Android/app/build.gradleファイルに、:react-native-splash-screenプロジェクトをコンパイル時の依存関係として追加します。

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

3：次の変更により、MainApplication.Javaファイルを更新してreact-native-splash-screenを使用します。

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

サンプルコード：

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

export default class example extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }


    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={(e)=> {
                    Linking.openURL('http://www.devio.org/');
                }}
            >
                <View >
                    <Text style={styles.item}>
                        SplashScreen 启动屏
                    </Text>
                    <Text style={styles.item}>
                        @：http://www.devio.org/
                    </Text>
                    <Text style={styles.item}>
                        GitHub:https://github.com/crazycodeboy
                    </Text>
                    <Text style={styles.item}>
                        Email:[email protected]
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f2f2',
        marginTop: 30
    },
    item: {
        fontSize: 20,
    },
    line: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'darkgray',
    },
})
2
Sedric Heidarizarei

IOSとAndroidの両方の別のソリューションを次に示します： https://github.com/mehcode/rn-splash-screen 。 app.tsx（エントリポイント）のrender関数でスプラッシュスクリーンを非表示にし、すべてのhttpsリクエストが完了するまで同じ画像を表示しました。

私のコード：

public render()
    {
        SplashScreen.hide();

       //after everything has finished loading - show my app.
       if (this.state.isFinishedloading) 
        {
            return (
                <this.navigator screenProps={{ ...providers }} />
            );
        }

      // Until then show the same image as the splash screen with an ActivityIndicator.
        return (
           <View style={{ flex: 1 }}>
              <Image style={styles.image} source={require('../assets/img/splash.png')} >
                <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
              </Image>
           </View>
        );

    }
3
neomib

私もこの問題を経験しました。私の場合、永続化状態をストレージから抽出してレデューサーにフィードするために使用するのはredux永続ライブラリであり、このプロセスはその1秒の間にほぼ1秒かかり、白い画面をちらつき表示して実際の画面をレンダリングしていました。

私が使用した回避策は、これが実際にはスプラッシュを非表示にするコントロールがJavaScript側にあることです。

componentDidMount() {
    SplashScreen.hide();
}

少し遅延を追加するだけで問題なく動作します。

componentDidMount() {
    setTimeout(() => SplashScreen.hide() , 2000);
}
3
ArkaneKhan

この問題が発生したため、デバッグに多くの時間を費やしました。

解決策：CSSプロパティが私のコンポーネントの1つで重複していました。重複を削除すると、白い画面の問題が修正されました。

1
Ahsanwarsi

私は @ sergiulucaci on GitHub で言及されている手順に従ってこれを修正し、うまくいきました

Android/app/src/main/res/values/styles.xmlに移動します

次のようにアプリのプレビューを無効にします：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="Android:windowDisablePreview">true</item> // <--- ADD THIS
        // Other items...
    </style>
</resources>
0
kaushal