Question

中找到

我有以下反应原生元素：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <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>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

具有以下样式：

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

这导致以下屏幕：

如何阻止文字离开屏幕并将其限制在屏幕中间，宽度为父母的80％。

我认为我不应该使用width，因为我会在很多不同的手机屏幕上运行它，我希望它是动态的，所以我认为我应该完全依赖flexbox。

（这是我在flex: 0.8内descriptionContainerHor的第一个原因。

我想要实现的是这样的：

谢谢！

Answer 1

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

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

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

Ally Rippley

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

正如评论中提到的@sudoPlz一样，flexShrink: 1更新了这个答案。

Answer 2

这是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,
    }
});

Answer 3

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

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

根据您的设置，您可能还需要将flexShrink: 1添加到<View>的父项中，以使其正常工作，因此您可以进行尝试

该解决方案是由node在Adam Pietrasiak中发现的

Answer 4

如果您分别从flexDirection: row和descriptionContainerVer移除descriptionContainerVer2，则此功能正常。

更新（参见评论）

我做了一些改变，以达到我认为你所追求的目标。首先，我删除了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
},

希望这有帮助！

Answer 5

你需要为你的<Text>设置一个包装器，如下所示;

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

Answer 6

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

这会起作用

Answer 7

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

Answer 8

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

我的代码：

"fileLocation"

Answer 9

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

Answer 10

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

{flex：aNumber}是您所需要的！

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

Answer 11

这对我有用

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

Answer 12

我想补充一点，我遇到了同样的问题，而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>

Answer 13

即使在使用flex列的情况下，这在大多数情况下也对我有用：

wordWrap: 'break-word'

这样，即使在相同的元素/组件上具有硬编码宽度，文本仍将自动换行。

width: 100

在您的情况下：

width: '80%'

对于我来说，这对于保留3列并仍读取文本至关重要。

希望这会有所帮助！

Answer 14

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

Answer 15

没有一个答案对我有用，所以我决定使用一个 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：当然这仅适用于字母书写系统，其他不使用空格的书写系统（例如中文书写）不会使用此组件换行。

Answer 16

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

我找到了这个 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

Answer 17

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

Answer 18

我下面的解决方案：

<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'
},

结果： [ d]my result[1]

反应我的屏幕上的本机文本，拒绝包装。该怎么办？

18 个答案:

即使在使用flex列的情况下，这在大多数情况下也对我有用：

在您的情况下：

希望这会有所帮助！