React Native Android端react-native-pdf组件无法滚动的解决咨询

以下是几个实用的解决思路，按优先级尝试：

1. 禁用PDF组件自身滚动，交由外层ScrollView控制 #

react-native-pdf默认自带滚动逻辑，和外层ScrollView会产生滚动冲突。可以通过以下步骤解决：

• 给<Pdf>组件添加scrollEnabled={false}属性，禁用其内部滚动
• 获取PDF加载完成后的总高度，动态设置给PDF组件，让外层ScrollView识别完整的滚动范围

示例代码：

import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';
import Pdf from 'react-native-pdf';

const YourComponent = () => {
  const [pdfTotalHeight, setPdfTotalHeight] = useState(0);
  const source = { uri: 'your-pdf-url', cache: true };

  return (
    <ScrollView
      style={styles.container}
      stickyHeaderIndices={[0]}
      showsVerticalScrollIndicator={true}
      nestedScrollEnabled={true}
    >
      {/* 你的sticky header */}
      <View style={styles.header}>
        {/* header内容 */}
      </View>
      
      <View style={styles.inner}>
        <View style={styles.pdfContainer}>
          <View style={styles.pdfBody}>
            <Pdf 
              source={source} 
              trustAllCerts={true}
              scrollEnabled={false} // 禁用PDF自身滚动
              onLoadComplete={(numberOfPages, filePath, { width, height }) => {
                // 计算PDF总高度：单页高度 × 页数
                setPdfTotalHeight(height * numberOfPages);
                console.log(`Number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page, numberOfPages) => { 
                console.log(`Current page: ${page}`); 
              }} 
              onError={(error) => { console.log(error); }}
              onPressLink={(uri) => { console.log(`Link pressed: ${uri}`); }}
              style={[styles.pdf, { height: pdfTotalHeight }]} // 动态设置总高度
            />
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = {
  container: { flex: 1 },
  header: { height: 60, backgroundColor: '#fff', padding: 16 },
  inner: { flex: 1, padding: 16 },
  pdfContainer: { flex: 1 },
  pdfBody: { flex: 1 },
  pdf: { width: '100%' }
};

export default YourComponent;

2. 使用FlatList替代ScrollView #

FlatList对Android嵌套滚动的支持更友好，适合带sticky header的场景：

• 将sticky header放在ListHeaderComponent中
• PDF组件作为列表项渲染，保留其自身滚动逻辑（或根据需求禁用）

示例代码：

import React from 'react';
import { FlatList, View } from 'react-native';
import Pdf from 'react-native-pdf';

const YourComponent = () => {
  const source = { uri: 'your-pdf-url', cache: true };

  return (
    <FlatList
      style={styles.container}
      ListHeaderComponent={
        <View style={styles.header}>
          {/* header内容 */}
        </View>
      }
      showsVerticalScrollIndicator={true}
      nestedScrollEnabled={true}
      data={[{}]} // 仅需一条数据渲染PDF
      renderItem={() => (
        <View style={styles.inner}>
          <View style={styles.pdfContainer}>
            <View style={styles.pdfBody}>
              <Pdf 
                source={source} 
                trustAllCerts={true}
                nestedScrollEnabled={true} // 开启PDF的嵌套滚动
                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 pressed: ${uri}`); }}
                style={styles.pdf} 
              />
            </View>
          </View>
        </View>
      )}
    />
  );
};

const styles = {
  container: { flex: 1 },
  header: { height: 60, backgroundColor: '#fff', padding: 16 },
  inner: { flex: 1, padding: 16 },
  pdfContainer: { flex: 1 },
  pdfBody: { flex: 1 },
  pdf: { width: '100%', flex: 1 }
};

export default YourComponent;

3. 检查样式冲突 #

确保PDF组件的各级容器没有设置以下样式，避免滚动被截断：

• 固定高度（如height: '100%'）
• overflow: 'hidden'
• flex: 0（应设置为flex: 1让容器自适应内容）

内容的提问来源于stack exchange，提问作者Yony Nguyen