下面的代码可以在这个实际示例中找到
我有以下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的最初原因。
我想要实现的是这样的:
谢谢你！
如果你分别从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
},
希望这能有所帮助!
如果你分别从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
},
希望这能有所帮助!
