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

下面的代码可以在this live example 反应本机文字离开我的屏幕，拒绝包装。该怎么办？

我有以下发现反应本土元素：

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

（这是最初的原因，我的descriptionContainerHor内有flex: 0.8

我想实现的是这样的：！

谢谢

来源

2016-03-29 SudoPlz

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

[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

来源

2017-07-10 15:16:23

谢谢，这是一个很好的答案，但我已经试过了，出于某种原因，它并不总是有效（不知道为什么：S）。flexwrap在反应原生中有点片状。 +1虽然为此带来了。 – SudoPlz

这应该被接受回答 –

^^^这是这里的实际答案。接受这个作品！ – gregblass

在这如果您的文本字段需要width。请将其添加为：

descriptionText: { 
    width: 200, // any value 
    // ... rest attributes 
}

工作示例这里：https://rnplay.org/apps/duVfpA

来源

2016-03-29 14:06:46 Cherniv

那是什么我现在使用，但会这实际上适用于所有屏幕尺寸？如果它是平板电脑，那么宽度不对。再加上我无法设置一个百分比。我错了吗？ – SudoPlz

你可以使用这里指出的解决方案：http://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus – Cherniv

这就是我做的，但它不是想法。我们希望能够在每个可能的屏幕上运行。 – SudoPlz

，如果你从descriptionContainerVer和descriptionContainerVer2分别除去flexDirection: row工作。

UPDATE（见注释）

我做了一些改动，以达到我想你了。首先我删除了descriptionContainerHor组件。然后我将垂直视图的flexDirection设置为row，并添加了alignItems: 'center'和justifyContent: 'center'。由于垂直视图现在实际上沿水平轴堆叠，因此我从名称中删除了Ver部分。

所以，现在你有一个包装视图，它应该垂直和水平对齐它的内容并沿着x轴堆叠它。然后，我只需在Text组件的左侧和右侧放置两个隐形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>

凡textWrap的样式像这样：

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

希望这有助于！

来源

2016-03-29 20:48:20

好的，我改变了一些问题，以反映我真正希望达到的目标。现在关于答案：我使用'flexDirection：row'的原因是因为（如果我有这个权利）'flexDirection'指定该父项的'子项'将被堆叠的方向。现在，我希望**文本**可以成为连续叠放儿童的父母的中间孩子**，占据父母宽度的80％（类似于第二张照片）。你能否更新一下这个答案来反映这一点？我愿意接受这个答案。 – SudoPlz

对不起，迟到了，很忙。但我已经更新了我的答案，希望这是你需要的。 –

这个答案绝对是惊人的。正是我一直在寻找的，谢谢艾略特!!!!! – SudoPlz

我发现这个问题的另一个解决方案是将文本包装到视图中。同时设置视图的风格flex：1.

来源

2017-02-24 00:00:35 Joel

你只需要有一个包装为您<Text>中包含弯曲;

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

来源

2017-11-05 19:36:49 jsina

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

来源

2017-11-12 23:00:39

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

回答

相关问题