react native class library (1)

            React Native class library. The following class libraries are compatible with IOS and Android

1. Install the class library. After installation, find the class library you just downloaded in node_modules. There is a README.md file in it, and there is a demo to teach you how to use it, or the js in it can be clicked to view the properties that can be set. Find the open source class library on GitHub with detailed instructions

     npm install class library name --save //download dependencies

      npm rm class library name //delete class library

2. Timer library

   https://github.com/react-native-component/react-native-smart-timer-enhance

3. TabBar bottom navigation (compatible with Android and IOS) --react-native-tab-navigator

Download dependencies:  npm install react-native-tab-navigator --save

  https://github.com/happypancake/react-native-tab-navigator   //GitHub address

4. Carousel

Here are 2 types:

   The first:

  npm install react-native-swiper --save 

  https://github.com/leecade/react-native-swiper    //GitHub
  second:

  https://github.com/archriss/react-native-snap-carousel  //GitHub

5. Imitation QQ sidebar react-native-side-menu

    npm install react-native-side-menu --save

      https://github.com/react-native-community/react-native-side-menu //GitHub address

      import SideMenu from "react-native-side-menu";//Import the sidebar. Note that import is required here, the official document has not been modified

6. Cascade (similar date selection, region selection) react-native-picker

    https://github.com/beefe/react-native-picker    //GitHub address

7. Native photo album camera operation.

   https://github.com/ivpusic/react-native-image-crop-picker //GitHub address, the functions of the third-party react-native-image-crop-picker are more complete and easy to use (multiple selection, compression, cropping, etc.).

   https://my.oschina.net/u/3112095/blog/1552828 //My Open Source China

  https://github.com/react-native-community/react-native-camera //Powerful, you can customize the interface, we can choose which camera to use, whether to take pictures or videos, whether to record sound, whether to turn on the flash, view Scale, shot quality, shot orientation, touch functionality, barcode/QR code scanning, and more.

Eight. Time processing class library -- moment

    http://momentjs.cn/ //Official website address

    npm i moment --save

   moment().format("YYYY-MM-DD hh:mm:ss"); take the current time and format

9. TabBar that can slide left and right (pre-rendered)

https://github.com/skv-headless/react-native-scrollable-tab-view //GitHub address 

10. RN file upload (ios only), download, create, delete and other file operations (compatible with IOS and Android) --react-native-fs

https://github.com/itinance/react-native-fs //GitHub address

Eleven. Custom Modal Box

https://github.com/react-native-community/react-native-modal //GitHub address

12. Fingerprint Authentication

https://github.com/hieuvp/react-native-fingerprint-scanner   //Support IOS and Android, GitHub address  

https://github.com/react-native-component/react-native-smart-touch-id //Only supports IOS, GitHub address

https://github.com/naoufal/react-native-touch-id //Support ios Touch id and Face id

Thirteen.prop-types type detection

React.PropTypes.xxx has been deprecated since react 15.5, and the third-party library prop-types is used.

npm install prop-types --save install third-party libraries for prop-types

Import again: import PropTypes from 'prop-types';

Use this to perform type checking on parameters passed from parent components to child components.

For example, the child component accepts the parameter type passed from the parent component to be an array, then the parent component must pass an array, otherwise an error will be reported. If the array is an array, a string is a string, a number is a number, and so on. isRequired is required to have this attribute.

import PropTypes from 'prop-types';
class Demo extends Component {
  constructor(props){
     super(props);
     
  }
  //设置固定值。如果值是其他外部的组件传过来的，这里又定义了，那么这里就是默认值，其他组件传过来会覆盖默认值.如果只接收父组件传过来的，默认值可定义也可不定义。
  //获取固定值或者获取父组件传过来的值:this.props.name
  static defaultProps={
    imgData:[]
  }
//对父组件传过来的参数进行检测
  static propTypes={
    imgData:PropTypes.array.isRequired
  }
  render() {
       return(
         <View><Text>哈哈哈</Text></View>
       )
    );
  }
}