React-Native中的Modal組件可以用來覆蓋包含React Native根視圖的原生視圖，是RN經(jīng)常需要用到的一個(gè)組件，其使用的方式卻很難受。

  class Demo extends Component {
    static state = {
      visible: false,
    }

    render() {
      <View>
        <Model
          visible={this.state.visible}
          onRequestClose={() => {}}
        />
      </View>
    }
  }

如果使用RN初始的Modal組件，每次使用Modal都需要在View里面插入一個(gè)Modal，還得根據(jù)state來控制Modal的呈現(xiàn)，調(diào)用很繁瑣。而一個(gè)頁面可能有多個(gè)Modal組件，會使代碼非常的亂。
而對于前端來說，調(diào)用一個(gè)這樣的控件，我們最習(xí)慣的方式則是Dialog.show()。如果最方便的實(shí)現(xiàn)這種調(diào)用Modal的方式呢？這里我推薦使用Decorator修飾器來包裝Component達(dá)到我們的需求。

在RN種引入Decorator

因?yàn)镈ecorator是ES7的一個(gè)提案，所以RN并沒有默認(rèn)支持這個(gè)功能，我們需要為他添加一些配置。首先將依賴的babel plugin包裝進(jìn)去

npm i --save-dev babel-plugin-transform-decorators-legacy

然后在.babelrc中添加相應(yīng)的plugin。

{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}

這樣我們就能在RN中使用Decorator了。

創(chuàng)建一個(gè)withModal的Decorator

通過Decorator來實(shí)現(xiàn)我們需要的功能，我的思路是將所需要調(diào)用Modal的Component父級包一層View，然后在Component同級render一個(gè)Modal。使用Modal的方式為this.props.showModal('modalName', params).then(data => {})，具體實(shí)現(xiàn)代碼如下。

// withModal.js
import React, { Component } from 'react';
import {
  View,
  Modal,
} from 'react-native'
import InputModal from './InputModal'; // 封裝的子Modal

const Modals = {
  'InputModal': InputModal,
};

export default function withModal(Component) {
  return class ModalComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        visible: false, // Modal的visible
        renderedModal: null, // Modal所渲染
      };
      this.showModal = this.showModal.bind(this);
      this.hideModal = this.hideModal.bind(this);
    }
    
    // 隱藏Modal
    hideModal(value) {
      this.setState({
        visible: false,
      });
      this.resolve(value);
    }
    
    // 顯示Model
    showModal(modalName, params) {
      this.setState({
        visible: true,
        RenderedModal: Modals[modalName],
        params,
      });
      // return一個(gè)promise對象
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
      })
    }

    render() {
      const {
        visible,
        RenderedModal,
        params,
      } = this.state;
      return (
        <View>
          <Component
            {...this.props}
            showModal={this.showModal} // 將showModal方法傳入組件的props
          />
          <Modal
            animationType="slide"
            visible={visible}
            onRequestClose={() => {}}            
          >
            {RenderedModal ? <RenderedModal
              {...params}
              hideModal={this.hideModal} // 將hideModal方法傳入子控件
            /> : null}
          </Modal>
        </View>
      )
    }    
  }
}

這里我們還需要一個(gè)簡單Input子控件

// InputModal.js
import React, { Component } from 'react';
import {
  View,
  TextInput,
  TouchableOpacity,
  Text,
} from 'react-native';

export default class InputModal extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit() {
    this.props.hideModal(this.value); // 關(guān)閉Modal并將值導(dǎo)出
  }

  render() {
    const {
      placeholder,
      defaultValue,
    } = this.props;
    return (
      <View>
        <TextInput
          onChangeText={value => {this.value = value}}
          placeholder={placeholder || ''}
          defaultValue={defaultValue || ''}
        />
        <TouchableOpacity onPress={this.onSubmit}>
          <Text>確定</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

使用withModal修飾器

在withModal寫好后，我們只需要在組件類上使用這個(gè)修飾器就可以在props。
需要注意的是，這種封裝方式，會使原組件多一層父級View，很可能會影響到樣式呈現(xiàn)，所以推薦只在page頁的最頂層Component使用這個(gè)修飾器，然后通過prop將方法傳給子組件，這樣能對樣式的影響降低?，F(xiàn)在我們來對一個(gè)簡單的Component使用withModal。

import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import withModal from './withModal';

// 只要使用這個(gè)Decorator，就能在組件的props中得到一個(gè)showModal方法
@withModal
class HomePage extends Component {
  constructor(props) {
    super(props);
    this.showInputModal = this.showInputModal.bind(this);
    this.state = {
      text: '',
    }
  }

  showInputModal() {
    // 需要使用的Modal是InputModal，然后將需要給傳給modla的props對象作為參數(shù)傳下去，并且接收返回值
    this.props.showModal('InputModal', {
      placeholder: '請?zhí)顚憙?nèi)容',
      defaultValue: this.state.text,
    }).then(value => {
      this.setState({
        text: value,
      })
    })
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.showInputModal}>
          <Text>彈出model</Text>
          <Text>{this.state.text}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

簡單的效果如下

效果圖

在這個(gè)demo中我使用的是一個(gè)固定的InputModal，當(dāng)然通過改造也能傳入Jsx來達(dá)到想要的效果。
這是我在使用RN過程中覺得比較便利的方式方式，如果你有更好的想法，歡迎來討論。