css – 反映我的屏幕上的本机文本,拒绝包装.该怎么办？

我有以下反应本机元素：

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

希望这可以帮助！

css – 反映我的屏幕上的本机文本,拒绝包装.该怎么办？

解决方法

猜你在找的CSS相关文章