Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-easy-loading-view
Advanced tools
Readme
$ npm install react-native-easy-loading-view --save
Check example in the folder.
edit your project root view,like this(detail please see example):
import Loading from 'react-native-easy-loading-view';
render() {
return (
<View style={[{flex:1}]}>
<App/>
<Loading
ref={(view)=>{Loading.loadingDidCreate(view)}} // 必须调用
top={86} // 如果需要在loading或者hud的时候可以点击导航上面的按钮,建议根据自己导航栏具体高度来设置。如果不需要点击可以不设置
offsetY={-150} // 默认loading 和 hud 会在 去掉top之后高度的中间,如果觉得位置不太合适,可以通着offsetY来调整
// loadingDefaultText={''} // loading动画的文字
// loadingTextStyle={{ fontSize : 16, color: 'red' }} // loading动画文字的样式
// loadingImage={require('./screen/loading_2.gif')} // loading动画是显示的gif
// loadingImageStyle={{ width : 100, height : 100 }} // gif 图片样式
// hudStyle={{ width : 150, height : 150 }} // hud的全局样式
// hudBackgroundColor={'red'} // hud全局背景色
// hudDefaultText={'努力加载中...'} // hud默认全局文字
// hudTextStyle={{ fontSize : 16, color: 'red' }} // 文字样式
// activityIndicatorSize={'small'} // hud上面的圈圈 small or large
// activityIndicatorColor={'red'} // hud上面圈圈的颜色
// hudCustomImage={require('./screen/loading_2.gif')} // 自定义hud上面的圈圈显示,可以把转的圈圈替换为gif
// hudImageStyle={{ width : 50, height : 50 }} // 自定义hud图片的样式
/>
</View>
);
}
use loading(show or dismiss)
import Loading from 'react-native-easy-loading-view';
Loading.showHud(); //显示hud
Loading.showLoading(); //显示loading
Loading.dismiss(); // 消失
Prop | Default | Type | Description |
---|---|---|---|
top | 0 | number | Distance from top of container. |
bottom | 0 | number | Distance from bottom of container. |
offsetY | 0 | number | loading or hud y offset. |
loadingDefaultText | string | loading view default display text. | |
loadingTextStyle | {...} | style | loading view display text style. |
loadingImage | image | loading view display gif image. | |
loadingImageStyle | {...} | style | loading view display image style |
hudDefaultText | string | hud view default display text. | |
hudTextStyle | {...} | style | hud view display text style. |
hudStyle | {...} | style | hud view style. |
hudBackgroundColor | 'transparent' | color | loading view display image style |
hudCustomImage | image | hud view custom image. | |
hudImageStyle | {...} | style | hud custom image style |
activityIndicatorSize | 'small' | string | hud view default ActivityIndicator size. |
activityIndicatorColor | style | hud view default ActivityIndicator color |
Parameters:
Name | Type | default | Description | optional |
---|---|---|---|---|
text | string | hudDefaultText | hud view display text | YES |
extraTop | number | 0 | hud view extra offset y | YES |
bkColor | string | '' | hud view backgroundColor | YES |
Parameters:
Name | Type | default | Description | optional |
---|---|---|---|---|
text | string | loadingDefaultText | loading view display text | YES |
extraTop | number | 0 | loading view extra offset y | YES |
bkColor | string | '' | loading view backgroundColor | YES |
FAQs
A react native loading view
The npm package react-native-easy-loading-view receives a total of 3 weekly downloads. As such, react-native-easy-loading-view popularity was classified as not popular.
We found that react-native-easy-loading-view demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.