自己实现 React Native 的Alert

在用RN进行移动开发中，为了实现弹框，一般使用RN提供的Alert类型的alert方法实现启动一个提示对话框，包含对应的标题和信息。但是有一个问题是，当设置了手机的系统字体大小的时候，弹出框的字体大小会随着系统的设置而改变，为了解决这个问题，我自己写了一个封装了一个Alert类型，调用方式和RN的一样，不过内部实现用的是Text组件。这样可以避免上面出现的问题。

用到一个包：

react-native-root-siblings：
官方解释：
Add sibling elements after your app root element. The created sibling elements are above the rest of your app elements. This can be used to create a Modal component or something should be over your app.
自我理解：就是在原有的app元素上覆盖一个新的元素。常用来创建模态框。

用到JS工具库：lodash

说明：我之前本来想用模态框来替代Alert，但是后来发现，在直接调用Alert的地方没有办法写Modal组件，所以只能替代那种通过按钮弹出模态框的情况，没有办法解决通过逻辑弹出框的情况。所以思路出错。白白浪费了挺多时间。

代码：渲染一个弹出框，样式就不贴了

render() {
const { title, message, options } = this.props;
return (
  <View style={styles.container}>
    <View style={styles.alert} >
      <Text style={styles.title}>{title}</Text>
      {!isUndefined(message) && <Text style={styles.message}>{message}</Text>}
      <View style={styles.operating}>
        {!isUndefined(options) ? this.optionsElement() :
        <TouchableOpacity
          style={styles.operationItem}
          onPress={() => { this.props.onPressCancel(); }}
        >
          <Text style={[styles.fontStyle, { fontFamily: 'PingFangSC-Medium' }]}>OK</Text>
        </TouchableOpacity>}
      </View>
    </View>
  </View>
);

}`

组件的调用：

const Alert = function() {
this.panel = null;

return {
    alert(title, message, options) {
      if (!isUndefined(this.panel)) {
        this.panel.destroy();
      }

  this.panel = new RootSiblings(
    <AlertWindow
      title={title}
      message={message}
      options={options}
      onPressCancel={() => this.panel && this.panel.destroy()}
    />
  );
},
  };
};
export default Alert();

大功告成，可以直接调用该类，使用方法和RN的alert一样！
代码github地址：https://github.com/hexianga/RN-usage/tree/master/Alert