React Native常用一些组件

    xiaoxiao2021-03-25  119

    新写的一个loading组件: https://github.com/wenxucheng/react-native-loading-w

    Android iOS通用的;一个可用于做loading动画的组件:https://github.com/mohebifar/react-native-loader

    同时兼容iOS与Android的Toast组件

    给大家安利一款可以在iOS和Android上通用的Toast组件: react-native-root-toast 现在开源的Toast组件一大堆,为什么要选用这个呢?原因如下:

    纯javascript解决方案,免去了原生安装的各种繁杂步骤,直接一行npm install react-native-root-toast --save搞定同时兼容iOS和Android,使用完全一致的接口,不用再为同时兼容两个平台再写额外的代码可以自定义toast的各类属性(显示时间、位置、延时、动画、阴影等)同时支持两种调用形式(可以使用API调用,也可以作为Component直接放在render里面进行控制)

    安装

    npm install react-native-root-toast --save

    搞定!

    使用

    可以支持两种不同的调用方式. 如果你喜欢API方式的调用

    import Toast from 'react-native-root-toast'; // 引入类库 // 通过调用 Toast.show(message, options); 可以在屏幕上显示一个toast,并返回一个toast实例 let toast = Toast.show('This is a message', { duration: Toast.durations.LONG, // toast显示时长 position: Toast.positions.BOTTOM, // toast位置 shadow: true, // toast是否出现阴影 animation: true, // toast显示/隐藏的时候是否需要使用动画过渡 hideOnPress: true, // 是否可以通过点击事件对toast进行隐藏 delay: 0, // toast显示的延时 onShow: () => { // toast出现回调(动画开始时) }, onShown: () => { // toast出现回调(动画结束时) }, onHide: () => { // toast隐藏回调(动画开始时) }, onHidden: () => { // toast隐藏回调(动画结束时) } }); // 也可以通过调用Toast.hide(toast); 手动隐藏toast实例 setTimeout(function () { Toast.hide(toast); }, 500);

    你也可以通过React组件方式调用Toast.在render里面加入<Toast />组件,并通过visible属性对Toast进行控制. <Toast /> 的属性和API调用时传入的选项相同.toast内容添加在元素内部: <Toast>message</Toast> 注意: 通过组件方式调用的toast,在<Toast />组件 componentWillUnmount 的时候会自动消失

    import React, {Component} from 'react-native'; import Toast from 'react-native-root-toast'; class Example extends Component{ constructor() { super(...arguments); this.state = { visible: false }; } componentDidMount() { setTimeout(() => this.setState({ visible: true }), 2000); // show toast after 2s setTimeout(() => this.setState({ visible: false }), 5000); // hide toast after 5s }; render() { return <Toast visible={this.state.visible} position={50} shadow={false} animation={false} hideOnPress={true} >This is a message</Toast>; } }

    下面是演示动图

    Modal弹窗组件

    分享一个纯js的Modal弹窗组件react-native-root-modal 相比其他Modal弹窗组件,这个组件有以下几个优势 1.纯javascript解决方案,安装方便 2.同时兼容ios和android 3.灵活度相当高,元素外层使用View包裹,你可以对Modal元素添加任何可以在View上添加的属性(其他原生的Modal元素,比如官方提供的Modal,动画、样式、尺寸都改不了) 4.使用方便,和官方提供的Modal类似 引入Modal元素 在需要出现弹窗的地方添加<Modal visible={true}>...</Modal> done.这个元素会出现在屏幕的最上层,会盖住其他所有的元素,需要关闭弹窗把visible属性改为false既可

    更多介绍和案例查看github

    安装

    npm install react-native-root-modal@1.0.2

    使用

    这个弹窗组件使用起来很方便:

    引入Modal import Modal from 'react-native-root-modal'; 加入Modal元素,设置visible属性为true,该弹窗和它里面的内容就会出现在屏幕的最上层 <Modal visible={true}> ...这里是弹窗的内容 </Modal>

    TIPS

    Modal元素和View元素的用法几乎一样,只是Modal元素会脱离文档流出现在其他元素上面 你可以给Modal添加自定义的样式,也可以添加自定的动画或者添加PanResponder,随你怎么玩,灵活性很大

    回复

    react-native-starrating 星星评分组件支持iOS、安卓。

    自定义了一个 星星评分组件,支持iOS、安卓、不依赖其他第三方,使用请参考 https://github.com/bluesky0109/react-native-starRating 对应说明。

    一个基于React Native的Material Design风格的组件库。(为了平台统一体验,目前只打算支持安卓)

    官方网站 http://mrn.js.org/

    Github https://github.com/binggg/mrn

    示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w

    示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/android/app/build/outputs/apk/app-release.apk? raw=true

    左滑解决方案:react-native-swipe-left (android/ios)

    github: https://github.com/yzsolo/react-native-swipe-left npm: https://www.npmjs.com/package/react-native-swipe-left

    如果对你有帮助,star it,谢谢。

    IOSAndroid

    Features (特性)

    转载请注明原文地址: https://ju.6miu.com/read-8529.html

    最新回复(0)