NativeDialog

• category: UI
• chinese: native 对话框
• type: UI 组件

设计思路

仅千牛端可用。

在 Native 端开启一个新的窗口，具有独立 Instance，运行独立代码，数据通信由 native 接管完成。

在 h5 端 使用 iframe + postMesage 完成功能弹出、关闭、数据通信。

API

NativeDialog.show(src,options,aftershow,fail,notify)

• src : 对话框内部组件 url,qap 协议的资源地址，例如 qap:///dialog-content.js
• options:

{
    width : '640rem',//宽度
    height: '300rem',//高度
    cancelOnTouch:true,//是否允许点击遮罩层关闭对话框
    data:{} //自定义参数

• aftershow: function //渲染出浮层回调
• fail: function //渲染失败回调
• notify:function(info)//浮层关闭时回调，info 为返回的 state 结果

//在一个页面上展示浮层，渲染dialog.js
NativeDialog.show(
  'qap:///dialog.js?id=1234',
  {
    width: '640rem',
    height: '300rem',
    showMask: true,
    cancelOnTouch: true,
    data: {
      extraData: 233444
    }
  },
  ret => {
    this.setState({ response: ret });
    console.log(ret);
  },
  err => {
    this.setState({ response: err });
    console.log(err);
  },
  info => {
    this.setState({ response: JSON.stringify(info) });
    console.log(JSON.stringify(info));
  }
);

//dialog.js 内部
    constructor(props) {
        super(props);
        //如果要在h5下使用，需要在构造函数里初始化iframe通信
        NativeDialog.initFrame({
            inner:true
        })
    }
    render() {
        return (
            <View>
                <Text>这是一个带有全屏遮罩的弹出框</Text>
                {/* 任意内容 */}
                <Button onPress={this.confirm}>确定</Button>
                <Button onPress={this.cancel}>取消</Button>
            </View>
        );
    }

    confirm = () => {
        NativeDialog.hide({'type':'confirm','data':"changed to something else"});
    }

    cancel = () => {
        NativeDialog.hide({'type':'cancel','data':"canceled"});
    }

NativeDialog.hide(data)

此函数在对话框内部调用，用于关闭对话框，并返回结果 data，此 data 将会作为前一个页面 notify 回调参数。

关于浮层背景透明的说明

每个 weex 页面的 body 默认是白底，如果浮层也是个 weex 页面， 则默认也会是白底，要想实现透明，需要额外在浮层代码中添加如下设定：

import { createElement, Component, render, setNativeProps } from 'rax';

setNativeProps(document.body, { style: { backgroundColor: 'rgba(0,0,0,0)' } });

示例如下：

// 写在浮层内部的 js 中
/** @jsx createElement */
import { createElement, Component, render, setNativeProps } from 'rax';
import { NativeDialog } from 'nuke';

class App extends Component {
  constructor(props) {
    super(props);

    // 从 rax 中引入 setNativeProps api,
    // 在构造函数中调用
    setNativeProps(document.body, {
      style: { backgroundColor: 'rgba(0,0,0,0)' }
    });

    NativeDialog.initFrame({
      inner: true
    });
  }
  render() {
    return <View style={styles.xcontainer}>{/** 浮层内的内容 **/}</View>;
  }
}
const styles = {
  xcontainer: {
    alignSelf: 'center',
    width: '640rem',
    height: '460rem',
    marginLeft: 'auto',
    marginRight: 'auto',
    backgroundColor: '#fff'
  }
};
render(<App />);