react native 类库(一)

            React Native 类库。以下类库兼容IOS和Android

一.安装类库.安装后在node_modules中找到你刚刚下载的类库,里面有README.md文件,里面有demo教你如何使用,或者里面的js可点开查看所可以设置的属性。具体GitHub上找到该开源类库,里面有详细的说明

     npm  install  类库名 --save  //下载依赖

      npm  rm     类库名   //删除类库

二.计时器类库

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

三.TabBar底部导航(兼容Android和IOS)--react-native-tab-navigator

下载依赖: npm install react-native-tab-navigator --save

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

四.轮播

这里提供2种:

   第一种:

   npm install react-native-swiper --save 

  https://github.com/leecade/react-native-swiper   //GitHub
  第二种:

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

五.仿QQ侧边栏react-native-side-menu

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

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

      import SideMenu from "react-native-side-menu";//导入侧边栏. 注意这里要import,官方文档未修改过来

六.级联(类似日期选择,地区选择)react-native-picker

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

七.原生相册相机操作。

   https://github.com/ivpusic/react-native-image-crop-picker  //GitHub地址,第三方的react-native-image-crop-picker的功能更为完整易用(可多选、压缩、裁剪等)。

   https://my.oschina.net/u/3112095/blog/1552828  //我的开源中国

  https://github.com/react-native-community/react-native-camera //功能强大,可以自定义界面,我们可以选择使用哪个摄像头、是拍照还是录像、是否录制声音、是否开启闪光灯、视图比例、拍摄质量、拍摄方向、触摸功能、条形码/二维码扫描等等。

八.时间处理类库--moment

    http://momentjs.cn/          //官网地址

    npm i moment --save

   moment().format("YYYY-MM-DD hh:mm:ss");取当前时间并格式化

九.可以左右滑动的TabBar(可预渲染)

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

十.RN文件上传(仅ios),下载,创建,删除等文件操作(兼容IOS和Android)--react-native-fs

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

十一.自定义的模态框

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

十二.指纹认证

https://github.com/hieuvp/react-native-fingerprint-scanner     //支持IOS和安卓,GitHub地址

https://github.com/react-native-component/react-native-smart-touch-id   //只支持IOS,GitHub地址

https://github.com/naoufal/react-native-touch-id //支持ios的Touch id和Face id

十三.prop-types类型检测

react 15.5起废弃了React.PropTypes.xxx,要用第三方库prop-types。

npm install prop-types    --save     安装prop-types的第三方库

再导入:import PropTypes from 'prop-types';

使用这个可以对父组件传到子组件的参数进行类型检测。

比如子组件接受父组件传过来的参数类型要数组,那么父组件就一定要传数组,否则报错。如果数组是array,字符串是string,数字是number等等。isRequired是必须要有这个属性。

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>
       )
    );
  }
}

猜你喜欢

转载自my.oschina.net/u/3112095/blog/1540110