Alert and Loading boxes are essential components in mobile terminal development. Each platform provides corresponding APIS. Of course, UI styles and response modes vary from platform to platform. In the recent project, I have done some work on related aspects. I have deliberately removed the related code logic from the project and packaged it into independent components. Here is a brief introduction.

react-native-overlayer

The react-Native project provides a common float component: github.com/yongqianvip…

function

  • Universal RRCAlert component
  • Generic RRCLoading component

install

npm i react-native-overlayer --save
Copy the code

RRCAlert

  • reference

    import { RRCAlert } from 'react-native-overlayer'; . RRCAlert.alert(title, content, buttons, callback, options);Copy the code

  • options

    key default value desc
    contentTextStyle null The text style of the popbox content

  • When buttons.length > 2, the buttons in the popover are arranged vertically

RRCLoading

  • reference

    import { RRCLoading } from 'react-native-overlayer'; import LoadingImage from './src/loading.gif'; . const options = { loadingImage: LoadingImage, text: 'gogogo' }; RRCLoading.setLoadingOptions(options); RRCLoading.show(); RRCLoading.hide();Copy the code

  • options

    key default value desc
    loadingImage null Image (GIF)
    text Loading in… Loading Text displayed in the loading box

  • Using giFs on Android requires additional configuration. Add the following code to Android /app/build.gradle

    Dependencies {/ / if you need to support the GIF diagram the compile 'com. Facebook. Fresco ": animated - GIF: 1.3.0'}Copy the code

Alert and Loading occur simultaneously

scenario The effect
Many timesRRCAlert.alert() Show the last one first (in reverse order)
Many timesRRCLoading.show() Just to show you the last one,RRCLoading.hide()When removing the
Triggered when loading does not disappearRRCAlert.alert() Loading is displayed first, and alert is displayed after loading disappears
Triggered when alert does not disappearRRCLoading.show() Loading is displayed first, and alert is displayed after loading disappears

The effect

The core to realize

Overlay RRCTopView (overlay) RRCTopView (overlay) RRCTopView (overlay) RRCTopView (overlay) RRCTopView (overlay) RRCTopView ‘absolute’), whose core code is as follows:

if (! AppRegistry.registerComponentOld) { AppRegistry.registerComponentOld = AppRegistry.registerComponent; } AppRegistry.registerComponent = function (appKey, componentProvider) { class RootElement extends Component { render() { let Component = componentProvider(); return ( <RRCTopView> <Component {... this.props} /> </RRCTopView> ); } } return AppRegistry.registerComponentOld(appKey, () => RootElement); }Copy the code