Показывать popupdialog вне компонента карты в

Я делаю listview и устанавливаю мультикарточный компонент для отображения данных внутри карты, в своем компоненте карты после нажатия кнопки show popupdialog внутри компонента карты, теперь я хочу показать всплывающее окно вне карты, на главном экране, но после того, как я исключил popupdialog из компонента карты , они не показывают popupdialog, теперь я хочу показать popupdialog из моего вида карты, но я не могу, пожалуйста, помогите мне:

<ListView initialListSize={10} horizontal={true} contentContainerStyle={{ flexDirection: 'row', width: (Dimensions.get('screen').width / 8) * 11 + 500, }} dataSource={this.state.dataJadid} renderRow={(rowData, sectionID, rowID) => ( <View style={{ width: 150, backgroundColor: 'white', marginRight: 5, marginLeft: 8, marginBottom: 3, marginTop: 20, }}> <View style={{ flexDirection: 'row' }}> <Image source={require('./../../assets/Image/Roban.png')} style={{ width: 60, height: 60 }} resizeMode="contain" /> <Text style={{ position: 'absolute', top: 12, left: 20, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center', color: 'white', }}> {rowData.ext1} </Text> </View> <Image source={{ uri: rowData.ax.toString() }} style={{ width: '100%', height: 90 }} resizeMode="stretch" /> { (rowData.toz.trim() != "") ? <View style={{ flexDirection: 'row' }}> <TouchableOpacity onPress={() => { this.popupDialog.show() }}> <Image source={require('./../../assets/Image/Details.png')} style={{ width: 70, height: 25, marginBottom: 5 }} resizeMode="stretch" /> <Text style={{ textAlign: 'center', justifyContent: 'center', alignItems: 'center', fontSize: 9, marginTop: 5, marginLeft: 15, position: 'absolute', color: 'white', }}> details </Text> </TouchableOpacity> </View> : <View style={{ flexDirection: 'row' }}> <TouchableOpacity> <Image source={require('./../../assets/Image/Details1.png')} style={{ width: 70, height: 25, marginBottom: 5 }} resizeMode="stretch" /> <Text style={{ textAlign: 'center', justifyContent: 'center', alignItems: 'center', fontSize: 9, marginTop: 5, marginLeft: 15, position: 'absolute', color: 'white', }}> '' </Text> </TouchableOpacity> </View> } <PopupDialog dialogTitle={<DialogTitle title="details" titleTextStyle ={{color:'white'}} titleStyle={{backgroundColor:'#b8e994'}} />} dialogStyle={{backgroundColor:'#ecf0f1'}} ref={(popupDialog) => { this.popupDialog = popupDialog }} > <View style={{alignItems:'center',justifyContent:'center'}}> <Text style={{alignItems:'center',justifyContent:'center',marginTop:'20%',paddingRight:50,paddingLeft:50}}>{rowData.toz}</Text> </View> </PopupDialog> )} /> 

Всего 1 ответ


У меня была такая же проблема .. и после большой борьбы я решил использовать это: https://github.com/jacklam718/react-native-popup-dialog. Лучший способ справиться с всплывающими диалогами. Прост в использовании, настраиваемый, и я даже использую функции обратного вызова для изменения продуктов в родительском компоненте. Я действительно предлагаю использовать это.


Есть идеи?

10000