Показывать popupdialog из карточки компонента в реагировать родной

Question

Я делаю просмотр списка и устанавливаю компонент с несколькими картами для отображения данных внутри карты, в моем компоненте карты после нажатия кнопки показать popupdialog внутри компонента карты, теперь я хочу показать popupdialog вне карты, на главном экране, но после того, как я исключаю popupdialog outкомпонента карты, они не показывают 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>
          )}
          />    

Answer 1

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