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

文本没有自动换行#1438

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

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

盟友涟漪

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

正如@sudoPlz在评论中提到的，它与flexShrink: 1一起更新这个答案。

没有一个答案对我有用，所以我决定使用一种破解方法，即通过空白分割文本，并分别呈现每个单词。

虽然这是一种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:当然这只适用于字母书写系统，其他不使用空格的书写系统(例如中文书写)将不会使用此组件进行换行。

如果你分别从descriptionContainerVer和descriptionContainerVer2中删除flexDirection: row，它就会工作。

更新(见评论)

我做了一些改变来达到我认为你想要的效果。首先，我删除了descriptionContainerHor组件。然后我设置垂直视图的flexDirection为row，并添加alignItems: 'center'和jusycontent: 'center'。因为垂直视图现在实际上是沿着水平轴堆叠的，所以我从名称中删除了Ver部分。

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

是这样的:

<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>

其中textWrapis的样式是这样的:

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

希望这能有所帮助!

<视图风格= {{flexDirection:‘行’}}> <Text style={{flex: number}}>你错过了fdddddd dddddddd 你错过了 < /文本> < /视图>

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

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

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

我的代码:

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;
`;
`;

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

这是可行的