@react-pdf/renderer
https://gyazo.com/b32f5b540977646da11b1a332c10316f
React v18で使うときの対応
なのでdisplay: 'flex'の指定はしてもしなくても変わらない
ここにdisplayの項目があるがdefaultでflex もう一つの値はnone
React Nativeの実装に近い
code:ts
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
</View>
<View style={styles.section}>
</View>
</Page>
</Document>
);
react-pdfが提供するComponentを使用し、styleもflexboxベース
Yogaを使っているので、RNと近いのは当然という感じがする 全く同じ名前の別ライブラリがある
こちらはPDFファイルをReact上でプレビューするもの