In App development, we cannot avoid using two components, Toast and network Loading Loading. In RN development, there is no official provider for these two commonly used components, so developers need to define them according to their own needs. The author carries out secondary encapsulation on the basis of other components, which is easier to use and more expansible. Students only need to drag Toast and Loading files into the project and install the corresponding component library

rendering

Toast and Loading Demo addresses

Github.com/guangqiang-…

Demo uses the three-party components used

  • React-native -root-toast: displays toast
  • React-native -root-siblings: used to load a view at the top of the App
  • The react – native – vector – the ICONS: IconFont

Pay attention to

React-native -vector-icons require a link to be used

Toast components

Here, the author categorize 8 different scenarios for the TOAST component. At present, there are only so many scenarios that can be thought of. Students can add other scenarios in the future, and students can also modify the ICONS used in the TOAST component

  • Show only the simplest text toast
  • Long toasts that display only the simplest text + 500 ms
  • Displays the toast of Success with a checkmark icon for success
  • Display toast of success, support callback, use scenario similar to login success, display toast of 1500 milliseconds, then jump to other page in callback function
  • Display long toast of success with display duration + 500 ms
  • Display long toast of success, display duration + 500 ms, support callback, use scenario similar to login success, display 1000 ms toast, then jump to another page
  • Display warning toast. The usage scenario is similar to the login form. The mobile phone number is incorrectly filled
  • Displays the toast with an error, using a scenario similar to the login form, where submission of the form fails

Loading component

The Loading component is most commonly used in network requests. Before data is returned, a Loading box is displayed on the top of the page to prevent users from doing other operations during network requests and to provide users with a better experience without a blank page

  • Loading Supports manual call display: show()
  • Support for manually turning off the display: hidden()

Here, the author suggests using Redux to control the display and hiding of Loading, so that it is not necessary to manually invoke the display and hiding on every page requiring network requests. For more advanced Loading techniques, please refer to the author’s React Native development project: OneM

Toast core source

const Toast = { toast: null, show: msg => { this.toast = RootToast.show(msg, { position: 0, duration: 1500 }) }, showLong: msg => { this.toast = RootToast.show(msg, { position: 0, duration: 2000 }) }, showSuccess: (msg, options) => { let toast = RootToast.show( Platform.OS === 'ios' ? <View style={styles.container}> <Icon name='check' size={50} color={'#fff'}/> <Text style={styles.message}>{msg}</Text> </View> : msg, { duration: 1500, position: RootToast.positions.CENTER, ... options, }) setTimeout(function () { RootToast.hide(toast) typeof options === 'function' ? options && options(): null }, 2000) }, showLongSuccess: (msg, options) => { let toast = RootToast.show( Platform.OS === 'ios' ? <View style={styles.container}> <Icon name='check' size={50} color={'#fff'}/> <Text style={styles.message}>{msg}</Text> </View> : msg, { duration: 2000, position: RootToast.positions.CENTER, ... options, }) setTimeout(function () { RootToast.hide(toast) typeof options === 'function' ? options && options(): null }, 2500) }, showWarning: (msg, options) => { let toast = RootToast.show( Platform.OS === 'ios' ? <View style={styles.container}> <Icon name='warning' size={40} color={'#fff'}/> <Text style={styles.message}>{msg}</Text> </View> : msg, { duration: RootToast.durations.SHORT, position: RootToast.positions.CENTER, ... options, }) setTimeout(function () { RootToast.hide(toast) }, RootToast.durations.SHORT + 500) }, showError: (msg, options) => { let toast = RootToast.show( Platform.OS === 'ios' ? <View style={styles.container}> <Icon name='close' size={40} color={'#fff'}/> <Text style={styles.message}>{msg}</Text> </View> : msg, { duration: RootToast.durations.SHORT, position: RootToast.positions.CENTER, ... options, }) setTimeout(function () { RootToast.hide(toast) }, RootToast.durations.SHORT + 500) } }Copy the code

Loading core source

const HUD = {

  show: () => {
    sibling = new RootSiblings(
      <View style={styles.maskStyle}>
        <View style={styles.backViewStyle}>
          <ActivityIndicator size="large" color="white" />
        </View>
      </View>
    )
  },

  hidden: ()=> {
    if (sibling instanceof RootSiblings) {
      sibling.destroy()
    }
  }

}
Copy the code

The welfare of time

  • React Native open source project OneM address (developed according to enterprise development standard framework) : github.com/guangqiang-… : Welcome friends star
  • The author Jane homepage: book contains more than 60 RN development related technical article www.jianshu.com/u/023338566… Welcome friends: pay more attention and give more likes
  • React Native QQ Chat group: 620792950
  • Tips: If you have technical problems related to RN during development, you are welcome to join the exchange group to ask questions and learn from each other. The exchange group also updates the latest RN learning materials to you regularly. Thank you for your support!