Делаю таблицу в react pdf .
Сделал компонент таблицы
const Table = ({ headers, dataContent, contentKeys }) => {
return <View style={{ display: 'flex', flexDirection: 'column', width: '100%', backgroundColor: 'green' }}>
{ headers.length > 0 ? <View style={{ display: 'flex', flexDirection: 'row', width: '100%', backgroundColor: 'green' }}>
{headers.map(hdr =>
<View style={{ width: '330px', backgroundColor: 'pink' }}>
<Text>{hdr}</Text>
</View>)}
</View> : null}
{dataContent && dataContent.length > 0 ? dataContent.map((dataObj,index)=><View style={{ display: 'flex', flexDirection: 'row', width: '100%', backgroundColor: 'green' }} wrap={false}>
<View style={{ width: '330px', backgroundColor: 'pink' }}>
<Text>{index + 1}</Text>
</View>
{contentKeys.length > 0 ? contentKeys.map((val)=><View style={{ width: '330px',display:'flex', flexWrap:'wrap',backgroundColor: 'pink' }}>
<Text>
{dataObj[val]}
</Text>
</View>) : null}
</View>) : null}
</View>
}
Проблемное место в этих строках
{contentKeys.length > 0 ? contentKeys.map((val)=><View style={{ width: '330px',display:'flex', flexWrap:'wrap',backgroundColor: 'pink' }}>
<Text>
{dataObj[val]}
</Text>
</View>) : null}
Когда передаешь динамические данные
<Table headers={['№','Вид обследования','Место','Цель проведения']} dataContent={checkupPlans} contentKeys={['kind','place','target']}/>
Текст нормально не переносится, выходит за границы таблицы
Как это исправить ?