React Native dynamic launch page (advertisement page), support for Android and iOS
npm install react-native-dynamic-splash --save
or
yarn add react-native-dynamic-splash
IOS | Android |
---|---|
![]() |
![]() |
CLI autolink feature links the module while building the app.
react-native link react-native-dynamic-splash
include ':react-native-dynamic-splash'
project(':react-native-dynamic-splash').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-dynamic-splash/android')
...
dependencies {
...
compile project(':react-native-dynamic-splash')
}
...
...
import com.taumu.rnDynamicSplash.DynamicSplashReactPackage; // Import package
public class MainApplication extends Application implements ReactApplication {
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DynamicSplashReactPackage() // Add here
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
...
}
pod 'RNDynamicSplash', :path => '../node_modules/react-native-dynamic-splash'
...
import com.taumu.rnDynamicSplash.DynamicSplash;
import com.taumu.rnDynamicSplash.utils.Config;
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
Config splashConfig = new Config(); // Splash configuration class
// splashConfig.setImageUrl("http://custom/splash.png");
splashConfig.setAutoHide(true);
// splashConfig.setAutoHideTime(2000);
// splashConfig.setLayoutResID(R.layout.custom_splash_dynamic);
// splashConfig.setThemeResId(R.style.Custom_Splash_Theme);
// splashConfig.setAutoDownload(false);
// splashConfig.setSplashSavePath("/customSplashPath/");
// splashConfig.setDynamicShow(false);
new DynamicSplash(this, splashConfig); // Add display splash here
super.onCreate(savedInstanceState);
}
...
}
...
#import "RNDynamicSplash.h"
#import "SplashConfig.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[self.window makeKeyAndVisible];
SplashConfig *config = [[SplashConfig alloc] init]; // Splash configuration class
// config.imageUrl = @"http://custom/splash.png";
config.autoHide = true;
// config.autoHideTime = 1000;
// config.dynamicShow = false;
// config.autoDownload = false;
// config.splashSavePath = @"custom";
[[RNDynamicSplash alloc] initWithShow:rootView splashConfig:config]; // Add display splash here
return YES;
}
@end
...
type | Field | defaultValue | setter | description |
---|---|---|---|---|
String | imageUrl | “” | setImageUrl | Download picture address |
String | splashSavePath | /splash/ | setSplashSavePath | Save image address |
int | themeResId(Android only) | R.style.DynamicSplash_Theme | setThemeResId | Use theme resource id |
int | layoutResId(Android only) | R.layout.splash_dynamic | setLayoutResId | Use layout file resource id |
boolean | autoDownload | true | setAutoDownload | Whether to download automatically |
boolean | dynamicShow | true | setDynamicShow | Whether to display the downloaded picture |
boolean | autoHide | false | setAutoHide | Whether to automatically hide |
long | autoHideTime | 3000 | setAutoHideTime | Automatically hide time |
Can call the request to get the address of the picture
// mock json data
// {
// splashInfo: {
// imageUrl: "http://***.png"
// }
// }
...
import com.taumu.rnDynamicSplash.utils.HttpUtils;
public static void getSplashImageUrl(String getApi) {
HttpUtils.get(getApi, new HttpUtils.Callback() {
@Override
public void onResponse(String jsonString) {
try {
JSONObject jsonObject = new JSONObject(jsonString);
JSONObject valueObject = jsonObject.getJSONObject("splashInfo");
String imageUrl = valueObject.getString("imageUrl");
if (!TextUtils.isEmpty(imageUrl)) {
Config splashConfig = new Config();
splashConfig.setImageUrl(imageUrl);
new DynamicSplash(activity, splashConfig);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
});
}
...
name | type | description | conflict |
---|---|---|---|
hide() | function | Js control hidden splash | autoHide not set true |
downloadSplash() | function | Js control download pictures | autoDownload is set to false |
Author: TaumuLu
GitHub: https://github.com/TaumuLu/react-native-dynamic-splash
#react-native #react #mobile-apps