React Native常用一些组件

新写的一个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组件一大堆，为什么要选用这个呢？原因如下：

1. 纯javascript解决方案，免去了原生安装的各种繁杂步骤，直接一行npm install react-native-root-toast --save搞定
2. 同时兼容iOS和Android，使用完全一致的接口，不用再为同时兼容两个平台再写额外的代码
3. 可以自定义toast的各类属性（显示时间、位置、延时、动画、阴影等）
4. 同时支持两种调用形式（可以使用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

使用

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

1. 引入Modal

import Modal from 'react-native-root-modal';

2. 加入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，谢谢。

  
  

• IOS	Android

  Features （特性）