React Native 는 Modal 사용자 정의 공유 인터페이스의 예제 코드 를 사용 합 니 다.

많은 App 에서 공유 와 관련 이 있 습 니 다.React Native 는 Modal 구성 요 소 를 제공 하여 일부 모드 적 인 팝 업 창 을 실현 합 니 다.예 를 들 어 진도 상 자 를 불 러 오고 탄 상 자 를 공유 하 는 등 입 니 다.Modal 구축 분석 을 사용 한 효 과 는 다음 과 같 습 니 다.

사용자 정의 분석 인터페이스 코드 는 다음 과 같 습 니 다.
ShareAlertDialog.js

/**
 * https://github.com/facebook/react-native
 * @flow     
 */


import React, {Component} from 'react';
import {View, TouchableOpacity, Alert,StyleSheet, Dimensions, Modal, Text, Image} from 'react-native';
import Separator from "./Separator";

const {width, height} = Dimensions.get('window');
const dialogH = 110;

export default class ShareAlertDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isVisible: this.props.show,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({isVisible: nextProps.show});
  }

  closeModal() {
    this.setState({
      isVisible: false
    });
    this.props.closeModal(false);
  }

  renderDialog() {
    return (
      <View style={styles.modalStyle}>
        <Text style={styles.text}>      </Text>
        <Separator/>
        <View style={{flex: 1, flexDirection: 'row', marginTop: 15}}>
          <TouchableOpacity style={styles.item} onPress={() => Alert.alert('        ')}>
            <Image resizeMode='contain' style={styles.image}
                source={require('../images/share_ic_friends.png')}/>
            <Text>     </Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.item}>
            <Image resizeMode='contain' style={styles.image}
                source={require('../images/share_ic_weixin.png')}/>
            <Text>    </Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.item}>
            <Image resizeMode='contain' style={styles.image}
                source={require('../images/share_ic_weibo.png')}/>
            <Text>    </Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  render() {

    return (
      <View style={{flex: 1}}>
        <Modal
          transparent={true}
          visible={this.state.isVisible}
          animationType={'fade'}
          onRequestClose={() => this.closeModal()}>
          <TouchableOpacity style={styles.container} activeOpacity={1}
                   onPress={() => this.closeModal()}>
            {this.renderDialog()}
          </TouchableOpacity>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalStyle: {
    position: "absolute",
    top: height - 170,
    left: 0,
    width: width,
    height: dialogH,
    backgroundColor: '#ffffff'
  },
  subView: {
    width: width,
    height: dialogH,
    backgroundColor: '#ffffff'
  },
  text: {
    flex: 1,
    fontSize: 18,
    margin: 10,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center'
  },
  item: {
    width: width / 3,
    height: 100,
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  image: {
    width: 60,
    height: 60,
    marginBottom: 8
  },
});

어떤 단 추 를 누 르 면 상자 가 팝 업 됩 니 다.예제 코드 는 다음 과 같 습 니 다.

constructor(props) {
    super(props);
    this.state = {
      showSharePop: false,//    ，     
    }
  }


//  

onSharePress() {
    this.setState({showSharePop: !this.state.showSharePop})
  }
//    
<NavigationBar
          navigator={this.props.navigator}
          popEnabled={false}
          style={{backgroundColor: "transparent", position: "absolute", top: 0, width}}
          leftButton={ViewUtils.getLeftButton(() => this.props.navigator.pop())}
          rightButton={ViewUtils.getShareButton(() => this.onSharePress())}/>

//  ShareAlertDialog     
<ShareAlertDialog show={this.state.showSharePop} closeModal={(show) => {
          this.setState({showSharePop: show})
        }} {...this.props}/>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.