在本地响应中显示卡组件中的弹出对话框

Question

我进行列表视图并设置多卡组件以在卡内显示数据，在单击按钮后在卡组件内显示popupdialog后在我的卡组件中，现在我想在卡外在主屏幕中显示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>
          )}
          />    

Answer 1

我遇到了同样的问题..经过很多努力，我决定使用此方法：https://github.com/jacklam718/react-native-popup-dialog 是处理弹出对话框的最佳方法。.易于使用，可自定义，我什至使用回调函数来更改父组件中的内容。.我真的建议使用此方法。