反应原生文本离开我的屏幕，拒绝换行。该怎么办？

我从下面的链接中找到了解决方案。

[Text] Text doesn't wrap #1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

https://i.stack.imgur.com/wBg6p.png

如果你想感谢他，下面是 Github 个人资料用户链接。

Ally Rippley

编辑：2019 年 4 月 9 日星期二

正如@sudoPlz 在评论中提到的那样，它可以与flexShrink: 1更新此答案一起使用。

https://i.stack.imgur.com/naCWB.png

---

该问题的解决方案是 flexShrink: 1。

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

根据您的设置，您可能还需要将 flexShrink: 1 添加到 <View> 的父级，以使其正常工作，因此请使用它，您会成功的。

该解决方案由 Adam Pietrasiak 在 this thread. 中发现

---

这是a known bug。 flexWrap: 'wrap' 对我不起作用，但此解决方案似乎对大多数人都有效

代码

<View style={styles.container}>
    <Text>Some text</Text>
</View>

风格

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

---

您只需要为您的 <Text> 使用 flex 包装器，如下所示；

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

---

这对我有用

<View style={{flexShrink:1}}>
  <Text>some long random text...</Text>
</View>

---

大多数时候，我们在使用 flexDirection: 'row' 时会看到这个问题，因为在其他情况下，它被正确处理了。

无论如何，这里有两种正确换行文本的方法；

第一种方法：

要将文本换行到下一行而不离开显示，我们可以通过限制 <Text> 的宽度来做到这一点；

<Text style={{width: "60%"}}>some long text goes here ...</Text>

上面的代码将文本的宽度限制为可用宽度的 60%，如果整个文本不适合，它会自动换行，即剩余的文本将移动到下一行，依此类推。

第二种方法

在文本元素及其包装它的父元素上设置 flexShrink: 1。

例如，

<View style={{ flexShrink: 1, justifyContent: 'space-between', alignItems: 'center', flex: 1, flexDirection: 'row'}}>
    <Text>First long string which goes long....</Text>
    <Text style={{flexShrink: 1}}>This is a long long text which must go out of the screen if we dont style it properly and not do some logic here</Text>
</View>

其他样式只是为了表明结果正常工作。 flexShrink: 1 是您唯一需要的。

---

我发现这个问题的另一个解决方案是将文本包装在视图中。还将视图的样式设置为 flex：1。

---

如果您分别从 descriptionContainerVer 和 descriptionContainerVer2 中删除 flexDirection: row，它将起作用。

更新（见评论）

我进行了一些更改以实现我认为您所追求的目标。首先，我删除了 descriptionContainerHor 组件。然后我将垂直视图的 flexDirection 设置为 row 并添加 alignItems: 'center' 和 justifyContent: 'center'。由于现在垂直视图实际上是沿水平轴堆叠的，因此我从名称中删除了 Ver 部分。

所以现在你有一个包装视图，它应该垂直和水平对齐它的内容并沿着 x 轴堆叠它。然后我简单地将两个不可见的 View 组件放在 Text 组件的左侧和右侧来进行填充。

像这样：

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

和这个：

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

然后你就会得到我相信你追求的东西。

进一步改进

现在，如果您想在蓝色和橙色视图中堆叠多个文本区域，您可以执行以下操作：

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

textWrap 的样式如下：

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

希望这可以帮助！

---

<View style={{flexDirection:'row'}}> 
  <Text style={{flex: 1, flexWrap: 'wrap'}}> 

这将起作用

---

我遇到了同样的问题，要解决这个问题，我必须确保所有 View 父母都有 style={{flex: 1}}

---

在 React Native 的 0.62.2 版本中，我只是将“flex-shrink: 1”放在我的“Text”的容器中，但请记住容器视图中的 flex-direction:row。谢谢你们的帮助。

我的代码：

export const Product = styled.View`
  background: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  margin: 5px;
  flex-direction: row;
`;

export const ProductTitleContainer = styled.View`
  font-size: 16px;
  margin-left: 5px;
  flex-shrink: 1;
`;

export const ProductTitle = styled.Text`
  font-size: 16px;
  flex-wrap: wrap;
`;
`;

---

我想补充一点，我遇到了同样的问题，flexWrap, flex:1（在文本组件中），没有任何 flex 对我有用。

最终，我将文本组件的包装器的宽度设置为设备的宽度，然后文本开始换行。 const win = Dimensions.get('window');

<View style={{
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'center',
  alignSelf: 'center',
  width: win.width
}}>
  <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
  <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
</View>

---

我尝试了上面的许多答案，但没有一个对我有用。通过将 flexShrink 放在 Text 元素本身上并将 flexGrow 放在父 View 和 Text 元素上，我获得了最好的结果。

我需要父级上的 flexDirection: row，因为我想在右侧有一个图标

<View style={flexDirection: 'row', flexGrow: 1}>
    <Text style={
        flexGrow: 1, 
        flexShrink: 1, 
        paddingLeft: 16,
        paddingRight: 8,
        alignItems: 'center',
    }>
        A long text that needs to wrap into multiple lines
    </Text>
</View>
<Image source={rightArrow}/>

它看起来像这样：

https://i.stack.imgur.com/2lVh2.png

---

你想念fdddddd dddddddd 你想念fdd

{ flex: aNumber } 就是你所需要的！

只需将“flex”设置为适合您的数字即可。然后文本将换行。

---

<SafeAreaView style={{flex:1}}>
  <View style={{alignItems:'center'}}>
    <Text style={{ textAlign:'center' }}>
      This code will make your text centered even when there is a line-break
    </Text>
  </View>
</SafeAreaView>

---

不幸的是，以上都不适合我。

我找到了这个 npm 包，你可以直接使用这个包：https://github.com/Bang9/react-native-wrapped-text

或者创建类似这样的东西：

<View style={{ alignItems: "center", alignSelf: "center", width: "100%" }}>
  <View style={{ flexDirection: "row", flexWrap: "wrap"}}>
    <Text style={{ textAlign: "center"}}>Long text, sooo looong...</Text>
  </View>
</View>

基于：https://github.com/Bang9/react-native-wrapped-text/blob/master/src/index.js

---

尝试了一切，但没有任何效果->

wrapText:{
    width:"65%"
},
listItemLeft:{
    fontWeight:"bold",
    margin:3
},

<View style={styles.wrapText}>
    <Text style={styles.listItemLeft}>{item.left}</Text>
</View>

---

我认为你可以做这样的事情，我附上了一张带有代码的图片以获得更好的主意：

https://i.stack.imgur.com/OPV2h.png

所以，我们可以这样做：

TermsOfService = {
  fontFamily: 'Verlag-Book';
  fontSize: 14px;
  textAlign: center;
},
HighlightedText = {
  font-family: 'Verlag-Book';
  font-size: 14px;
  text-align: center;
  color: ${COLORS.PRIMARY_ADMIRAL_BLUE};
},
Container: {
  width: 100%;
  alignSelf: center;
  alignItems: center;
  justifyContent: center;
  flexDirection: row;
  flexWrap: wrap;
}

并且您的组件是否像这样使用它：

 <View style={Container}>
   <Text style={TermsOfService}>By joining, you agree to the some thing </Text>
   <Text style={HighlightedText}>this is highlighted </Text>
   <Text style={TermsOfService}>and </Text>
   <Text style={HighlightedText}>and this as well</Text>
 </View>

---

没有一个答案对我有用，所以我决定使用 hack，即用空格分割文本并分别渲染每个单词。

虽然这是一个 hack，但好处是我不必担心由于父容器样式而弄乱包装。

// This code is written in Typescript
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'center',
    paddingVertical: 8,
  },
})

export const WrapText: React.FC<{
  text: string
}> = ({ text }) => {
  return (
    <View style={styles.container}>
      {text.split(' ').map((word, index) => (
          <Text key={index}>
            {word}{' '}
          </Text>
        ))}
    </View>
  )
}

const Example = <WrapText text="Hello this is a working hack that wraps your text."/>

P/S：当然这只适用于字母书写系统，其他不使用空格的书写系统（例如中文文字）将不会使用此组件进行换行。

---

在文本样式中使用 height: 'auto'。

https://i.stack.imgur.com/hFA3Q.png

---

尝试在这样的文本组件中使用此道具 adjustsFontSizeToFit={true} 。

<Text adjustsFontSizeToFit={true}>

---

我的解决方案如下：

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

风格：

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

https://i.stack.imgur.com/6FtkP.png

---

<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>

---