React Native PDF - проблемы с укладкой одной страницы (выравнивание) ⇐ Javascript

[Anonymous]

Проблема
Я использую React-native-pdf в моем нативном приложении React для отображения документов PDF. I've encountered two issues that only happen when displaying a PDF with a single page:

• The single page appears centered instead of starting at the top of the container
• The borderRadius styles I've applied to the PDF component aren't working for single-page PDFs

When the PDF Имеет 2 или более страниц, все работает так же, как и ожидалось - первая страница начинается в верхней части контейнера, и пограничный применение правильно применяется.import React, { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, View } from 'react-native';
import Pdf from 'react-native-pdf';

export function DocumentViewerScreen() {
const [pdfUrl, setPdfUrl] = useState(null);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
// Simulated data loading
const loadDocument = async () => {
try {
// In real app, we'd fetch the PDF from an API
// This is just for demo purposes
setPdfUrl('https://example.com/sample.pdf'); // Or your base64 data URI
setIsLoading(false);
} catch (error) {
setIsLoading(false);
}
};
loadDocument();
}, []);

if (isLoading) {
return ;
}

return (



{/* Header placeholder */}


{pdfUrl && (
trustAllCerts={false}
source={{
uri: pdfUrl,
}}
style={styles.pdf}
/>
)}



{/* Share button placeholder */}


);
}
< /code>
А вот мои стили: < /p>
import { BorderRadius } from '@foundation/config';
import { ColorPalette } from '@foundation/config/colorPalette';
import { getScreenHeight, getScreenWidth } from '@foundation/helpers';
import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
scrollViewContent: {
gap: getScreenHeight(2.5),
paddingBottom: getScreenHeight(6.4),
alignItems: 'center',
flexGrow: 1,
},
pdfContainer: {
flex: 1,
height: '100%',
flexDirection: 'column',
display: 'flex',
borderWidth: 1,
},
pdf: {
flex: 1,
width: getScreenWidth(94),
height: '100%',
maxHeight: getScreenHeight(100),
flexDirection: 'column',
display: 'flex',
overflow: 'scroll',
backgroundColor: ColorPalette.BackgroundPrimary,
borderRadius: BorderRadius.Large,
borderWidth: 1,
},
buttonContainer: {
position: 'absolute',
bottom: getScreenHeight(4.1),
},
});
< /code>
Ожидаемое поведение: < /strong> < /p>

[*] Для одной страницы PDF документ должен начинаться с вершины контейнера, а не в центре вертикально < /li>

• Multi-page PDFs: Everything works as expected - pages start from the top and borderRadius is applied
• Single-page PDFs: The page appears centered vertically in the container and the borderRadius style is not applied

What I've Попробовал [/b]
Я экспериментировал с:

[*] Различные значения Fitpolicy (0, 1, 2)
[*] Настройка однопадных в True/false
[*] Scastring Scale, Minscale и различные другие виды
Комбинации < /li>
< /ol>
Вопрос < /strong>
Как я могу заставить одностраничные PDF ведут себя так же, как многостраничные PDF, где они начинаются с вершины контейнера и правильно применяют стиль BorderRadius? src = "https://i.sstatic.net/9kq2jvkn.jpg"/>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -alignment