react-native-splash-screen APP起動ページ設定
3817 ワード
紹介:react-native-splash-screenはreact-nativeプロジェクトコンポーネントをよく管理しています.
プロジェクトバージョンreact-native 0.61.5 react-native-splash-screen 3.2.0
インストール
(react-nativeバージョン>0.60以降、サードパーティ製コンポーネントをインストールするにはlinkを必要とせず、自動的にlinkされるようです)
コンフィギュレーション
Android
1、プロジェクトのandroid/settings.gradleファイルで、次の内容を追加します.
2、プロジェクトのandroid/app/build.gradleファイルで、コンパイル時の依存項目としてreact-native-splash-screenプロジェクトを追加します.
3、MainApplicationを更新する.JAvaファイルはreact-native-splash-screenで以下の変更で使用します.
4、MainActivity.の修正JAvaファイル
IOS
1.XCodeのプロジェクトナビゲータで、Libraries➜Add Files to[your project’s name]を右クリック
2、node_に移動modules➜react-native-splash-screenを追加し、SplashScreenを追加する.xcodeproj
3、XCodeのプロジェクトナビゲータで、プロジェクトを選択します.libSplashScreenを追加します.aプロジェクトのBuild Phases
4、ヒント"RNSplashScreen.h’file not found,選択項目→Build Settings→Search Paths→Header Search Pathsダブルクリック追加:
5、プロジェクトファイルの下でApplegate.mファイルに次の内容を追加します.
これはgithub上のエラー解決方法で、使用可能、リンク
うんてん
誤作動がない場合は、プロジェクトルートディレクトリの下のindexが必要です.jsファイルにコードを入れないと、起動ページにとどまり、appを正常に操作できません.
プロジェクトバージョンreact-native 0.61.5 react-native-splash-screen 3.2.0
インストール
yarn add react-native-splash-screen
(react-nativeバージョン>0.60以降、サードパーティ製コンポーネントをインストールするにはlinkを必要とせず、自動的にlinkされるようです)
コンフィギュレーション
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 {
...
implementation 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
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new SplashScreenReactPackage() //
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
4、MainActivity.の修正JAvaファイル
import android.os.Bundle; //
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; //
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; //
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); //
super.onCreate(savedInstanceState);
}
// ...other code
}
IOS
1.XCodeのプロジェクトナビゲータで、Libraries➜Add Files to[your project’s name]を右クリック
2、node_に移動modules➜react-native-splash-screenを追加し、SplashScreenを追加する.xcodeproj
3、XCodeのプロジェクトナビゲータで、プロジェクトを選択します.libSplashScreenを追加します.aプロジェクトのBuild Phases
4、ヒント"RNSplashScreen.h’file not found,選択項目→Build Settings→Search Paths→Header Search Pathsダブルクリック追加:
$(SRCROOT)/../node_modules/react-native-splash-screen/ios
5、プロジェクトファイルの下でApplegate.mファイルに次の内容を追加します.
#import "AppDelegate.h"
#import
#import
// #import "RNSplashScreen.h" // ( , , )
#import // ( )
@implementation AppDelegate
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...other code
[RNSplashScreen show]; //
// or
//[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
return YES;
}
@end
これはgithub上のエラー解決方法で、使用可能、リンク
うんてん
誤作動がない場合は、プロジェクトルートディレクトリの下のindexが必要です.jsファイルにコードを入れないと、起動ページにとどまり、appを正常に操作できません.
import "react-native-gesture-handler"
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import SplashScreen from 'react-native-splash-screen'; //
AppRegistry.registerComponent(appName, () => {
SplashScreen.hide(); //
return App
});