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

这将导致以下屏幕:

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

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

(这就是我在descriptionContainerHor中使用flex: 0.8的最初原因。

我想要实现的是这样的:

谢谢你！

当前回答

我尝试了上面的许多答案，但没有一个对我有效。我通过在文本元素本身上放置flexShrink和在父视图和文本元素上放置flexGrow来达到最好的效果。

我需要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}/>

它是这样的:

2021-12-15 13:47:03

其他回答

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

2017-02-24 00:00:35

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

希望这能有所帮助!

2016-03-29 20:48:20

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

2021-01-22 16:43:59

尝试在这样的文本组件中使用这个prop adjustsFontSizeToFit={true}。

<Text adjustsFontSizeToFit={true}>

2022-02-22 09:51:28

我尝试了上面的许多答案，但没有一个对我有效。我通过在文本元素本身上放置flexShrink和在父视图和文本元素上放置flexGrow来达到最好的效果。

我需要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}/>

它是这样的:

2021-12-15 13:47:03

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

推荐文章

最新文章

标签