Как реализовать всплывающее окно для прессы в iOS и Android с помощью response-native-popup-dialog - PullRequest
Новая
       40

Как реализовать всплывающее окно для прессы в iOS и Android с помощью response-native-popup-dialog

0 голосов
/ 25 декабря 2018

Я создаю кроссплатформенное приложение, в котором я пытаюсь реализовать небольшую функциональность, т. Е. При нажатии на текст я хотел бы отобразить дополнительную информацию во всплывающем окне.Чтобы добиться этого, я использую реагировать-родной-всплывающий диалог.Тем не менее, это дает мне ошибку - 

TypeError: cannot read property 'visible' of undefined

Я разрабатываю это для iOS, но я ожидаю, что это будет работать как для iOS, так и для Android.Вот мой код - 

import React, { Component } from 'react';
import {
  Switch,
  ScrollView,
  StyleSheet,
  Text,
  Image,
  View,
  TouchableOpacity,
} from 'react-native';

import * as Animatable from 'react-native-animatable';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
const axios = require('axios');
import moment from 'moment'
import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';

export default class AccordionScreen extends Component {
    constructor (){
        super();
        this.state = {
            activeSections: [],
            collapsed: true,
            multipleSelect: false,
            newData:[],
            visible: false
          };
    }


  componentDidMount(){
      this.fetchData();
  }

  fetchData() {
    axios({
        method: "POST",
        url: "URL",
        headers: {
            "Content-Type": "application/json",
            "Authorization": this.props.navigation.getParam('authorizationToken', undefined)
        },
        data: {}
    })
    .then (response => {
        if (response.status === 200 ){
            if (response.data.newData.length > 0 ){
                this.setState({ 
                    newData: response.data.newData
                });
                //console.log(activeSections);
            }
            else {
                return <h1>No Data!</h1>
            }
        }
        else{
            throw "Request resulted in NOT 200";
        }
    })
    .catch(error => {
        console.log(error);
    });
}

  _renderSectionTitle = section => {
    return (
      <View style={styles.titleHeader}>
        <Text>{moment(section.eventDate).format('ll')}</Text>
      </View>
    );
  };

  toggleExpanded = () => {
    this.setState({ collapsed: !this.state.collapsed });
  };

  setSections = sections => {
    this.setState({
      activeSections: sections.includes(undefined) ? [] : sections,
    });
  };
  _renderHeader(section, index, isActive, sections) {
    return (
      <Animatable.View

      duration={400}
      style={[styles.header, isActive ? styles.active : styles.inactive]}
      transition="backgroundColor">
      {
        isActive ?
        <Image source={require('../assets/images/upArrow.png')}
              style={{width: 15, height: 15, alignSelf: 'flex-end'}}
            />
            :
        <Image source={require('../assets/images/downArrow.png')}
            style={{width: 15, height: 15 , alignSelf: 'flex-end'}}
        />
      }
        <Animatable.View >
            <Animatable.Text style={styles.headerCont}>Other Insurer </Animatable.Text>
            <Animatable.Text>{section.name} </Animatable.Text>
        </Animatable.View>
        <Animatable.View >
            <Animatable.Text style={styles.headerCont}>Other Insured</Animatable.Text>  
            <Animatable.Text>{section.firstName} {section.lastName}  </Animatable.Text>  
        </Animatable.View>   
      </Animatable.View>

    );
  }

_renderContent(section, i, isActive, sections) {
    return (
      <Animatable.View
        duration={300}
        transition="backgroundColor"
        style={[styles.accordionCont, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
        >
        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Insurer Address
        </Animatable.Text>
        <Animatable.Text
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
         {section.addressStreet}
        </Animatable.Text>

        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Policy Number
        </Animatable.Text>

        <Animatable.Text
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          {section.policyNumber}
        </Animatable.Text>

        <Animatable.Text
          style={styles.headerCont}
          duration={300}
          easing="ease-out"
          animation={isActive ? 'zoomIn' : false}>
          Additional Details
        </Animatable.Text>
        <Animatable.View>
       <TouchableOpacity onPress={() => {
            this.setState({ visible: true });
        }}>
            <Animatable.Text style = {styles.buttonText}>
                View Details
            </Animatable.Text>
        </TouchableOpacity>
        <Dialog
            visible={this.state.visible}
            onTouchOutside={() => {
            this.setState({ visible: false });
            }}
        >
            <DialogContent>
                {section.policyNumber}
            </DialogContent>
        </Dialog>
        </Animatable.View>

      </Animatable.View>
    );
  }

  _updateSections = activeSections => {
    this.setState({ activeSections });
  };

  render() {
    const { multipleSelect, activeSections, poiHistoryData } = this.state;
    return (
        <View style={styles.container}>
            <ScrollView contentContainerStyle={{ paddingTop: 30 }}>
            <TouchableOpacity onPress={this.toggleExpanded}>
            <View style={styles.header}>
              <Text style={styles.headerText}>View Data</Text>
            </View>
          </TouchableOpacity>
                <Accordion 
                sections={newData}
                activeSections={activeSections}
                touchableComponent={TouchableOpacity}
                expandMultiple={multipleSelect}
                renderSectionTitle={this._renderSectionTitle}
                renderHeader={this._renderHeader}
                renderContent={this._renderContent}
                duration={400}
                onChange={this._updateSections}
                />
            </ScrollView>
        </View>

     ) }
}

Любые предложения, как я могу заставить это работать.Я определил «видимый» внутри моего состояния, поэтому не совсем уверен, почему он выдает эту ошибку.Любая помощь очень ценится.

1 Ответ

0 голосов
/ 25 декабря 2018

Это проблема масштаба.

Вам необходимо привязать функции к этому.Поэтому, когда вы вызываете this._renderContent, вы действительно должны вызывать this._renderContent.bind(this)

Вы должны сделать то же самое для this._renderSectionTitle и this._renderHeader

В качестве альтернативы вы можете определить свои функции как функции стрелок.

_renderContent = (section, i, isActive, sections) => { … }

...