React本机文本离开我的屏幕，拒绝包装。怎么办呢?

下面的代码可以在下面是一个生动的例子中找到

我有以下react原生元素:

'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'
}
});

这将导致以下屏幕:

Text off screen app

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

我不认为我应该使用width，因为我将在许多不同的移动屏幕上运行这个，我希望它是动态的，所以我认为我应该完全依赖flexbox。

(这就是为什么我在descriptionContainerHor. conf中有flex: 0.8的最初原因。

我想要实现的是这样的:

What I want to achieve .

谢谢你！

358706 次浏览
小开

如果你分别从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>

其中__abc0的样式是这样的:

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

希望这能有所帮助!

小开

我发现的另一个解决方案是通过在视图中包装文本。同时设置视图的样式为flex:

小开

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

[Text]文本不自动换行#1438

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

Output

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

Ally Rippley

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

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

enter image description here

小开

你只需要像下面这样为你的<Text>使用flex有一个包装器;

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

这是一个已知的bug。flexWrap: 'wrap'对我不适用，但这个解决方案似乎对大多数人都适用

代码

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

风格

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

我的解决方案如下:

<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'
},
< p >结果: (< img src = " https://i.stack.imgur.com/6FtkP.png " alt = " d]我的结果[1]”> < / p >
小开 
<View style=\{\{flexDirection:'row'}}>
<Text style=\{\{ flex: number }}> You miss fdddddd dddddddd
You miss fdd
</Text>
</View>

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

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

小开

我想补充的是，我有同样的问题和flexWrap, flex:1(在文本组件)，没有flex是为我工作。

最后，我将文本组件包装器的宽度设置为设备的宽度，文本开始包装。 const win = Dimensions.get('window'); < / p > 
<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: 1。

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

根据你的设置，你可能还需要将flexShrink: 1添加到<View>的父对象中，以使其工作，所以使用它，你就会成功。

解决方案是由亚当Pietrasiak在这个线程。中发现的

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

在React Native的0.62.2版本中，我只放了“;flex-shrink: 1”;在容器中我的“文本”，但记住弯曲方向:在容器视图中的行。谢谢你们的帮助。

我的代码:

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=\{\{flexShrink:1}}>
<Text>some long random text...</Text>
</View>
小开 
<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>
小开 
<View style=\{\{flexDirection:'row'}}>
<Text style=\{\{flex: 1, flexWrap: 'wrap'}}>

这是可行的

小开

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

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

小开

我也有同样的问题，要修复它，我必须确保所有视图父母有style=\{\{flex: 1}}

小开

不幸的是，上述方法对我都不起作用。

我发现了这个npm包，你可以直接使用这个包: https://github.com/Bang9/react-native-wrapped-text < / p >

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

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

小开

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

enter image description here enter image description here < / p >

小开

我试过了所有的方法，但没有成功，只有这个->

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


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

我认为你可以这样做，为了更好的想法，我附上了一张带有代码的图片:

enter image description here

所以，我们可以这样做:

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>
小开
我尝试了上面的许多答案，但没有一个对我有效。 通过将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}/>

它是这样的:

文本包装成多行截图

小开

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

无论如何，这里有两种方法来适当地包装文本;

第一种方法:

要将文本换行到下一行而不离开显示，可以通过限制<Text>;

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

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

第二种方法

在text元素及其包装它的父元素上设置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是你唯一需要的东西。

小开

尝试在文本组件中使用这个prop < >强adjustsFontSizeToFit ={真}< / >强。

<Text adjustsFontSizeToFit={true}>

提交答案