无法在模态视图中显示 react-native-pdf Pdf

问：

我有一个组件，我想在弹出窗口中显示pdf。我正在使用 react-native-pdf。 当我直接使用 Pdf 组件时，我可以看到 pdf 内容，但是当我尝试在 Modal 中使用它时，它不起作用。

import Pdf from 'react-native-pdf';

class ModalImage extends React.Component {
  

  render() {    
    console.log("Props in modalImage",this.props)
    return (
      <Modal
        animationType="fade"
        transparent={false}
        visible={this.props.modalVisible}
        onRequestClose={() => {
          this.props.closeModalVisible(!this.props.modalVisible);
        }}
      >
        <View style={styles.modalContainer}>
          <Text style={{ position: "absolute", top: 120, marginLeft: 12, marginRight: 12, fontSize: 16, color: "black", fontFamily: "Roboto-Bold" }}>Note: Please wait while we load the file. This may take some time, especially if it is a large file.</Text>
          <ScrollView horizontal={true}>            
            {
              this.props.imageType === "pdf" ? 
                
                    <Pdf style={{height:'100%', width:'100%', backgroundColor:'blue', zIndex: 99999}} source={{ uri: 'file://' + this.state.androidFilePath }} />
                
              :            

            <Image
              style={{
                width: this.state.transForm === 90 || this.state.transForm === 270 ? this.state.height : this.state.width,
                height: this.state.transForm === 90 || this.state.transForm === 270 ? this.state.width : this.state.height, marginTop: 100,
                transform: [{ rotate: this.state.transForm.toString() + "deg" }]
              }}
              resizeMode="contain"
              source={{ uri: this.props.imageAddress }}
            />
          }
          </ScrollView>
          <View style={styles.close_btn_container}>
            <TouchableOpacity
              onPress={() => {
                if (this.state.originWidth + 500 > this.state.width) {
                  this.setState({ width: this.state.width + 100 })
                }
              }}
              style={{ marginRight: 20 }}
            >
              <Image
                style={{
                  width: 30,
                  height: 30
                }}
                source={require("../../img/zoomIn.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              style={{ marginRight: 20 }}
              onPress={() => {
                if (this.state.originWidth < this.state.width) {
                  this.setState({ width: this.state.width - 100 });
                }
              }}
            >
              <Image
                source={require("./../../img/zoomOut.png")}
                style={styles.img_icon}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                if (this.state.transForm >= 360) {
                  this.setState({ transForm: 90 });
                } else {
                  this.setState({
                    transForm: this.state.transForm + 90
                  });
                }
              }}
              style={{ marginRight: 20 }}
            >
              <Image
                style={{
                  width: 30,
                  height: 30
                }}
                source={require("../../img/transform.png")}
              />
            </TouchableOpacity>
            <TouchableOpacity
              style={{ marginRight: 20 }}
              onPress={() => {
                if (this.props.isFileDownloaded) {
                  const http = this.props.imageAddress.startsWith("http");
                  const https = this.props.imageAddress.startsWith("https");
                  if (http || https) {
                    this.props.downloadImage(
                      this.props.imageAddress,
                      this.props.imageName
                    );
                  } else {
                    Alert.alert(
                      "Alert",
                      `The image url does not start with http / https`
                    );
                  }
                }
              }}
            >
              <Image
                source={require("./../../img/download.png")}
                style={styles.img_icon}
              />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                reduxStore.dispatch({
                  type: ActionTypes.TOGGLE_PATIENT_PROFILE_VIEW,
                  data: false,
                });
                this.props.closeModalVisible(!this.props.modalVisible);
              }}
            >
              <Image
                resizeMode="cover"
                style={styles.img_icon}
                source={require("../../img/error.png")}
              />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
}

我尝试给 z 索引来检查 pdf 是否在模态后面，但它仍然不起作用。 任何指示或帮助将不胜感激。