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() {
		this.setModalVisible(false);
		this.props.friend();
	}
	circle() {
		this.setModalVisible(false);
		this.props.CircleOfFriends();
	}

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

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

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


 */