无法在使用react-native-pdf的android应用程序中滚动pdf文件

Question

我在我的应用程序中使用了 react-native-pdf，我们想在应用程序中滚动该 pdf，但它在 ios 上运行良好，但在 android 中，它不会完全滚动，最多滚动 4 页。 pdf中有20页。 我在我的应用程序中使用了以下代码：-

render () {
    const source = require('./../../../assets/assets/pdfs/pdfname.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

render () {
    const source = require('./../../../assets/assets/pdfs/ebook_1.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

我希望我的 pdf 完全在应用程序内滚动。

Answer 1

尝试包装在 ScrollView 中，对我有用。

<View style={styles.container}>
    <ScrollView contentContainerStyle={{ flex: 1 }}>
        <Pdf
            source={source}
            onLoadComplete={()=>{
                console.log(`number of pages: ${numberOfPages}`);
            }}
            onPageChanged={()=>{
                console.log(`current page: ${page}`);
            }}
            onError={(error)=>{
                console.log(error);
            }}
            style={styles.pdf}/>
    </ScrollView>
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 5
    },
    pdf: {
        flex:1,
        width:Dimensions.get('window').width - 20
    }
});

Answer 2

尝试为您的 pdf 添加一些高度，然后它可以与滚动一起使用

我的 pdf 样式

pdfStyles: {
        height: screenHeight - 200,
        width: screenWidth
    },

这是我的pdf

<Pdf style={Styles.pdfStyles}
                        source={{
                            uri: '/storage/emulated/0/Download/sample.pdf',
                            cache: true
                        }}
                        onLoadComplete={(numberOfPages, filePath) => {
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page, numberOfPages) => {
                            console.log(`current page: ${page}`);
                        }}
                        onError={(error) => {
                            console.log(error);
                        }}
                        onPressLink={(uri) => {
                            console.log(`Link presse: ${uri}`)
                        }}
                    />