efunbox-mobile-8/pages/components/SharedDialog.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  TextInput,
  Button,
  StatusBar,
  Modal,
  TouchableHighlight,
  DeviceEventEmitter
} from "react-native";

type Props = {};
export default class SharedDialog extends Component<Props> {
  state = {
    modalVisible: false
  };

  setModalVisible(visible) {
    this.setState({
      modalVisible: visible
    });
  }

  render() {
    return (
      <Modal
        animationType="slide"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "column"
          }}
        >
          <TouchableOpacity
            style={{
              flex: 3.5,
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              width: "100%"
            }}
            activeOpacity={1}
            onPress={() => this.setState({ modalVisible: false })}
          >
            <View
              style={{
                flex: 3.5,
                width: "100%"
              }}
            />
          </TouchableOpacity>
          <View
            style={{
              flex: 1,
              width: "100%"
            }}
          >
            <View
              style={{
                flex: 1.5,
                width: "100%",
                flexDirection: "row",
                backgroundColor: "white"
              }}
            >
              <View
                style={{
                  flex: 1,
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center"
                }}
              >
                <View
                  style={{
                    height: 2,
                    left: 40,
                    backgroundColor: "#979797",
                    width: "60%"
                  }}
                />
              </View>
              <View
                style={{
                  flex: 1,
                  width: "100%",
                  alignItems: "center",
                  justifyContent: "center"
                }}
              >
                <Text
                  style={{
                    fontSize: 18,
                    color: "black"
                  }}
                >
                  分享
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  width: "100%"
                }}
              >
                <View
                  style={{
                    height: 2,
                    right: 40,
                    backgroundColor: "#979797",
                    width: "60%"
                  }}
                />
              </View>
            </View>
            <View
              style={{
                flex: 2,
                backgroundColor: "white",
                flexDirection: "row",
                justifyContent: "center",
                width: "100%"
              }}
            >
              <View
                style={{
                  flex: 1,
                  alignItems: "center"
                }}
              >
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={this.wechat.bind(this)}
                >
                  <View
                    style={{
                      flexDirection: "column",
                      alignItems: "center",
                      justifyContent: "center",
                      left: 40
                    }}
                  >
                    <Image
                      style={{
                        height: 43,
                        width: 43
                      }}
                      source={require("../images/share/wechat.png")}
                    />
                    <Text
                      style={{
                        fontSize: 16,
                        color: "black"
                      }}
                    >
                      发给到群/好友
                    </Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 0.3 }} />
              <View
                style={{
                  flex: 1
                }}
              >
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={this.circle.bind(this)}
                >
                  <View
                    style={{
                      flexDirection: "column",
                      alignItems: "center",
                      justifyContent: "center",
                      right: 40
                    }}
                  >
                    <Image
                      style={{
                        height: 43,
                        width: 43
                      }}
                      source={require("../images/share/circle.png")}
                    />
                    <Text
                      style={{
                        fontSize: 16,
                        color: "black"
                      }}
                    >
                      发朋友圈
                    </Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </View>
      </Modal>
    );
  }

  wechat() {
    alert("wechat");
  }
  circle() {
    alert("circle");
  }

  setModalVisible(visible) {
    this.setState({
      modalVisible: visible
    });
  }
}

/***
    使用方法
   <SharedDialog ref={view => (this.shareddialog = view)} />

  this.shareddialog.setModalVisible(true);//true显示，false消失


 */