react-native - 如何使用 react-native-popup-dialog 在 iOS 和 android 中实现弹出窗口
问题描述
我正在构建一个跨平台应用程序,我试图在其中实现一个小功能,即单击文本时,我想在弹出窗口中显示其他信息。为此,我使用了 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>
) }
}
任何建议,我怎样才能使它工作。我已经在我的状态中定义了“可见”,所以不确定它为什么会抛出这个错误。任何帮助深表感谢。
解决方案
这是一个范围问题。
您需要将函数绑定到此。所以当你打电话时,this._renderContent
你真的应该打电话this._renderContent.bind(this)
你应该对this._renderSectionTitle
和做同样的事情this._renderHeader
或者,您可以将函数定义为箭头函数。
_renderContent = (section, i, isActive, sections) => { … }
推荐阅读
- python - wxpython 改变图像大小和位置
- azure-sql-database - 接收器存储过程表名是必需的
- security - Jenkins Snyk 任务未发现通过 Snyk Web 扫描发现的漏洞
- c++ - 我可以重复使用 QRemoteObjectNode 吗?
- sql - liquibase 不支持以 postgres 作为数据库的“where not exists”子句吗?
- python - pyspark 计数和收集方法
- xml - 为什么属性也附加到子节点?
- python - 在 Django Rest Framework 中列出某些内容时,如何不仅仅显示对象的外键?
- android - Dagger 不允许我在一个类中使用两个相同类型的对象
- ios - 如何根据属性对对象数组进行升序排序 - Swift