以下代码可以在
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,backgroundColor: 'orange',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.
(这是我的flex的初始原因：在描述容器中有0.8.
我想要实现的是这样的：
谢谢！
解决方法
如果您分别从descriptionContainerVer和descriptionContainerVer2中删除flexDirection：row,它将起作用.见工作示例
here.
更新(见评论)
我做了一些改变,以达到我以为你以后.首先我删除了descriptionContainerHor组件.然后我将垂直视图的flexDirection设置为row并添加了alignItems：’center’和justifyContent：’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,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',alignItems: 'center',justifyContent: 'center',padding: {
flex: 0.1
},descriptionText: {
backgroundColor: 'green',flex: 0.8,flexWrap: 'wrap'
},
然后你得到我相信你以后,看到这个工作示例https://rnplay.org/apps/u9tSbQ.
进一步改进
现在,如果你想在蓝色和橙色的视图中堆叠多个文本区域,你可以这样做：
<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
},
这是完整的例子：https://rnplay.org/apps/4nmLEA.
希望这可以帮助！
