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';
    
    1. 加入Modal元素,设置visible属性为true,该弹窗和它里面的内容就会出现在屏幕的最上层
      <Modal visible={true}>
      ...这里是弹窗的内容
      </Modal>

    TIPS

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



  • @magicismight

    滋辞



  • 不好使呀!设置visible = true根本就没显示出来啊
    什么情况?



  • @jasmine
    有代码吗?
    github上有示例



  • @magicismight
    好使了,但是有一点我不懂,请教一下
    import Modal from 'react-native-root-modal';
    这种引入和require有什么区别

    我的情况是这样的
    我单独写了一个row.js,row的代码大概是下面这样:
    import Modal from 'react-native-root-modal';
    Row = React.createClass({
    //这里省略一些代码
    render:function(){
    return (
    <View>
    //省略了
    <Modal
    style={{
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.2)'
    }}
    visible={this.state.modalVisible}
    >
    //这里也省略了
    </Modal>
    </View>
    );
    }
    });

    然后我另一个js里require("./row"),这时modal会失效,
    但是我在index.android.js里也加入import Modal from 'react-native-root-modal'这句,modal就可以用了
    为什么?



  • @jasmine
    import 是ES6的语法
    你是怎么输出模块的呢?
    是export default xxx;还是module.exports = xxx;?



  • @magicismigh
    module.exports = xxx;这样的