Morioh
Login
Henry Short

Henry Short

3 years ago

Sample of React Native Easy App library

react-native-easy-app Demo

function points

  • Http public configuration and request
  • Access and use of AsyncStorage
  • Encapsulation of basic controls to improve the rapid layout of various application scenarios
  • Development and debugging tools

Jane book article react-native-easy-app Detailed and use

Effect Gif

usage

  • send request
  const  url  =  ' https://www.baidu.com ' ;

  * 同步请求
  const response = await XHttp().url(url).execute('GET');
  const {success, json, message, status} = response;

  if(success){
     this.setState({content: JSON.stringify(json)})
  } else {
     showToast(message)
  }

  * 异步请求
  XHttp().url(url).get((success, json, message, status)=>{
      if (success){
         this.setState({content: JSON.stringify(json)});
      } else {
         showToast(msg);
      }
  });

  * 异步请求
  XHttp().url(url).execute('GET')
  .then(({success, json, message, status}) => {
      if (success) {
           this.setState({content: JSON.stringify(json)});
      } else {
           showToast(message);
      }
   })
   .catch(({message}) => {
       showToast(message);
   })
  • App persistent data storage (AsyncStorage package)
  • Supports read and write operations on variables by rewriting the attribute accessor = (assignment) and. (point operation)
  • The data types that support reading and writing include string, json object (array), bool type
* Custom AsyncStorage instance object
 const  RNStorage = {
   customerId :  undefined ,
   hasLogin :  undefined ,
   userInfo : {}
}

* Associate the instance object RNStorage with the AsyncStorage storage data
 XStorage . initStorage ( RNStorage , () => (), ' 1.0 ' )

* Assuming that userInfo = () information
 can be returned after logging in XHttp () . Url ( Api . AuthCodeLogin ) . Param ( params ) . Post (( success , json , msg , code ) => {
     if ( success ) {
         RNStorage . HasLogin  =  true ; // bool type storage 
        RNStorage . customerId  =  String (JSON . ID ); // string type storage 
        RNStorage . the userInfo  =  JSON . the userInfo ; // object type stored 
        Navigation . Replace ( ' the Main ' );
    } else {
        showToast(msg);
    }
});

* Can be used directly for other applications where a RNStorage access memory through the data
 IF ( RNStorage . HasLogin ) {
     the let { name , Age , idCard } =  RNStorage . The userInfo ;
     Console . Log ( name , Age , idCard , RNStorage . The customerId ); // Print user information     
}
  • The encapsulation of basic controls improves the rapid development of various application scenarios
  • XView onPress event supports anti-shake implementation (prevent quick and repeated clicks)
  • XText supports RNTouch click events and icon settings (relative to the text icon can be set to left, top, right, bottom)
  • image
  *  XText Text form code with icon is as follows
     < XText  style = { styles . GrayText }  text = ' Text display ' />
     < XText  style = { styles . Text }  onPress = { () =>  showToast ( ' click event ' ) }  text = ' Text display (with touch effect) ' />
     <XView style={styles.iconTextParent}>
         <XText style={styles.iconText} text='文本' icon='mine_focus_shop' iconSize={20} position='left'/>
         <XText style={styles.iconText} text='文本' icon='mine_focus_shop' iconSize={20} position='right'/>
         <XText style={styles.iconText} text='文本' icon='mine_focus_shop' iconSize={20} position='top'/>
         < XText  style = { styles . IconText }  text = ' clickable '  icon = ' mine_focus_shop '  iconSize = { 20 }  position = ' bottom '  onPress = { () =>  showToast ( ' click event ' ) } />
         < XText  style = { styles . IconText }  text = ' No icon ' />
     </XView>
     <XText style={styles.rnTextItem} text='订单' icon='item_arrow_right' iconSize={16} position='right' textExtend={true}/>
     <XView style={{backgroundColor: Colors.white, marginBottom: 30}}>
          < XText  style = { styles . RnSearch }  text = ' Please enter customer name... '  icon = ' home_search_icon '  iconSize = { 16 }  position = ' left '  iconMargin = { 6 }  onPress = { () =>  showToast ( ' Click Jump to search ' ) } />
     </XView>

  • XImage supports click events (the corresponding icon size can be set independently)

  • image

  *   XImage image attribute setting source code is as follows
     <XView style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom: 30}}>
           <XImage style={{width: 65, height: 65}} icon='login_logo'/>
           <XImage style={{width: 65, height: 65}} icon={imgUrl}/>
           <XImage style={styles.rnImage} icon={imgUrl} onPress={() => showToast('柯南')}/>
           <XImage style={{width: 65, height: 65}} icon='mine_setting' onPress={() => showToast('点击事件')}/>
           <XImage style={{width: 65, height: 65}} icon='mine_setting' onPress={() => showToast('点击事件')} iconSize={30}/>
     </XView>
  • The paging component XFlatList realizes a set of distributable list display functions including no network, loading, no data, loading error, loading more, etc.
     <XFlatList data={dataList}
          onRefresh={() => this.queryDataList(true)}
          onLoadMore={() => this.queryDataList(false)}
          ListHeaderComponent={() => <RNText style={styles.header} text={headerText}/>}
          ref={refreshList => this.refreshList = refreshList}
          renderItem={({item, index}) => <CarItem onItemSelected={(model) => showToast(model.title)}/>}/>
  • The component provides two methods to realize the various status display of the control list. Pre-request pre-processing: this.refreshList.refreshPreLoad(isPullDown)
  • post-request status setting:, this.refreshList.refreshLoaded(success, isPullDown, reachedEnd, code)please refer to the example project for specific usage
  • Multi-screen adaptation, realize multi-screen adaptation in the basic components, and use it to develop non-perceptual adaptation
  • Principle: Select a reference screen size and multiply the size of the target control by [the size ratio of the target screen to the reference screen] (the text size is increased by a FontScale ratio)
  • Actively reset all the attribute data listed in the [Size White List] to the value calculated according to the reference ratio when all the basic components are built
  * Source code implementation
   export  function  resetStyle ( style ) { // Reset properties (ignore outer size) 
      let  styles  = { ... flattenStyle ( selfOr ( style , ()))};
       Object . Keys ( styles ) . ForEach (( keyStr ) => {
           if ( Props . sizeProps . has ( keyStr )) { //The size attribute needs to be modified 
              if ( keyStr === 'fontSize') {//字体属性
                  styles[keyStr] = RTSize(styles[keyStr]);
              } else {
                   let  value  =  styles [ keyStr ]; // Style attribute value, if it is integer data and not onePixel, reset the value 
                  if ( typeof  value  ===  ' number '  &&  value  !==  Const . onePixel ) {
                       styles [ keyStr ] =  RNSize ( value );
                  }
              }
          }
      });
      return styles;
  }

Download Details:

Author: chende008

Source Code: https://github.com/chende008/react-native-easy-app-sample

#react-native #react #mobile-apps

Sample of React Native Easy App library
2.20 GEEK