Question

我正在构建一个跨平台应用程序，试图在其中实现一个小的功能，即单击文本时，我想在弹出窗口中显示其他信息。为此，我正在使用react-native-popup-dialog。但是，这给了我错误-

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>

     ) }
}

任何建议，如何使它有效。我在状态内部定义了“可见”，因此不确定是否会引发此错误。非常感谢您的帮助。

Answer 1

这是范围问题。

您需要将功能绑定到此。因此，当您致电this._renderContent时，您实际上应该致电this._renderContent.bind(this)

您应该对this._renderSectionTitle和this._renderHeader进行相同操作

或者，您可以将函数定义为箭头函数。

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

如何使用react-native-popup-dialog在iOS和android中实现媒体弹出

1 个答案: