如何使用react-pdf

问题描述

我有一个pdf可以按预期呈现，但有一个问题，即当页面信息中包含一个很长的单词时，而不是将单词包装在换行符上，而是直接从容器中继续该单词页，知道谁在哪里。

这是一个创建此问题的容器的设置。样式后跟实际结构。

       const styles = StyleSheet.create({
         section: {
            paddingBottom: 20,position: 'relative',},sectionTitle: {
            fontSize: 12,fontWeight: 700,borderBottom: '2 solid #333333',display: 'block',marginBottom: 10,textTransform: 'uppercase',lineHeight: 1.2,})

下面是页面部分的设置

        <View style={styles.section}>
          <StyledText style={styles.sectionTitle}>Description</StyledText>
          <StyledText style={{ width: '80%',fontWeight: 400 }}>
            {data.description}
          </StyledText>
        </View>

此处data.description是以下形式的文本： “ looooooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg 这样的事情。容器应该打断单词，但是无论我如何尝试为其设置样式，单词都不会响应。 碰到容器的末端时该如何打断这个词？

到目前为止，我已经尝试使用wordWrap，wordBreak，flex，flexWrap，flexGrow / Shrink和overflowWrap。似乎没有任何作用

解决方法

你应该用 <Text> 覆盖你的标签，并给出属性 display:flex 和 flexDirection:row。
在这些之后，您的文本将中断。