https://github.com/sbdavid/react-native-startuppage
RN应用统一启动动画。
https://github.com/sbdavid/react-native-startuppage
Last synced: 2 months ago
JSON representation
RN应用统一启动动画。
- Host: GitHub
- URL: https://github.com/sbdavid/react-native-startuppage
- Owner: SBDavid
- License: mit
- Created: 2022-04-01T09:40:15.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-25T09:34:19.000Z (almost 4 years ago)
- Last Synced: 2025-12-27T21:50:58.387Z (6 months ago)
- Language: TypeScript
- Size: 649 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-startuppage
RN应用统一启动动画。有一下有点：
- 接入方便：提供了默认配置、动画效果
- 使用Native动画，在js文件加载期间不卡顿
- loading效果可配置：可以更具设计需求自定义动画组件
- 高性能机型上不展示 loading 效果：通过fadein动画，使得loading动画在高性能机型上隐藏
## 安装
+ npm install react-native-startuppage
## 使用
为了实现最短的白屏时长， `react-native-startuppage`需要在项目的入口文件中使用。并且减少在这个阶段引入的文件数量
所有的业务项目依赖应该在 `App.js`中引入。
### 基本使用，使用默认配置
使用`require('./src/App').default`实现业务代码的延迟加载
index.jsx
```js
import { AppRegistry } from 'react-native';
import { StartupPage } from '../src/index';
import React from 'react';
class AppWithLoading extends StartupPage {
getLazyComponent(props: any) {
const initData = props.initData;
const App = require('./src/App').default;
return ;
}
}
AppRegistry.registerComponent('PageAnalyticsExample', () => AppWithLoading);
```
### 使用自定义配置
您可以使用默认的loading效果，也可以自己实现。
并且默认loading效果具备基本的样式配置
- indicatorColor：动画颜色，默认黑色
- indicatorSize：动画宽高，默认40px
- indicatorDuration：fadein动画时长，默认800ms
- showIndicator：是否展示加载动画
- bgColor?：背景色，默认白色
- bgImageStyle：背景图
- bgImageSource：背景图
index.jsx
```js
import { AppRegistry } from 'react-native';
import { StartupPage, DefaultLoadingComp, DefaultBgComp } from 'react-native-startuppage';
import React from 'react';
class AppWithLoading extends StartupPage {
// 主界面
getLazyComponent(props: any) {
const initData = props.initData;
const App = require('./src/App').default;
return ;
}
// 背景图
getBgComp(_props: any): Element {
const home_pic = require('./home_pic.png');
return (
);
}
// loading动画
getLoadingComp(props: any): Element {
const isDarkMode = props.initData.isDarkMode;
if (isDarkMode) {
}
return (
);
}
}
AppRegistry.registerComponent('PageAnalyticsExample', () => AppWithLoading);
```