如何使用react-pdf进行自动换行

Question

我有一个按预期呈现的 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 是以下形式的文本：“looooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg”这样的东西。容器应该破坏这个单词，但无论我如何尝试设计它的样式，这个单词都没有响应。当碰到容器末端时如何打破单词？

到目前为止，我已经尝试过使用 wordWrap、wordBreak、flex、flexWrap、flexGrow/Shrink 和 OverflowWrap。似乎没有什么效果

Answer 1

尝试style={{ flex: 1 }}输入您想要断词的组件。

Answer 2

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