flexbox - view叠加 - react native页面布局




React Native Flexbox中的100%宽度 (6)

注意:尝试充分了解flex概念。

       <View style={{
          flex: 2,
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style ={{
              flex: 1,
              alignItems: 'center, 
              height: 50, 
              borderWidth: 1, 
              borderColor: '#000' 
          }}>
               <Text>Welcome to React Nativ</Text>
           </View>
           <View style={{
              flex: 1,
              alignItems: 'center,
              borderWidth: 1, 
              borderColor: 'red ', 
              height: 50
            }}
            >
              <Text> line 1 </Text>
            </View>
          <View style={{
            flex: 1,
            alignItems: 'center, 
            height: 50, 
            borderWidth: 1,                     
            borderColor: '#000'
          }}>
             <Text>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
             </Text>
           </View>
       </View>

我已经阅读了几个flexbox教程,但我仍然无法使这个简单的任务工作。

如何将红色框设为100%宽度?

码:

  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Natives
    </Text>
    <Text style={styles.line1}>
      line1
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
  </View>

样式:

container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
  flexDirection: 'column',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
  borderWidth: 1,
},
line1: {
    backgroundColor: '#FDD7E4',
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
  borderWidth: 1,
},

谢谢!

更新1: Nishanth Shankar的建议,为包装器添加flex:1,flexDirection:'row'

输出:

码:

  <View style={styles.container}>
    <View style={{flex:1}}>
      <Text style={styles.welcome}>
        Welcome to React Natives
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.line1}>
        line1
      </Text>
    </View>
    <View style={{flex:1}}>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  </View>

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    borderWidth: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    borderWidth: 1,
  },
  line1: {
      backgroundColor: '#FDD7E4',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    borderWidth: 1,
  },


只需删除容器样式中的 alignItems: 'center' ,并将 textAlign: "center" 添加到 line1 样式,如下所示。

它会运作良好

container: {
  flex: 1,
  justifyContent: 'center',
  backgroundColor: '#F5FCFF',
  borderWidth: 1,
}

line1: {
    backgroundColor: '#FDD7E4',
    textAlign:'center'
},

只需将 alignSelf: "stretch" 添加到项目的样式表中即可。

line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},

首先添加Dimension组件:

import { AppRegistry, Text, View,Dimensions } from 'react-native';

第二个定义变量:

var height = Dimensions.get('window').height;
var width = Dimensions.get('window').width;

第三个把它放在你的样式表中:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height*0.25,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

实际上在这个例子中,我想制作响应式视图,并希望仅查看0.25的屏幕视图,所以我将它乘以0.25,如果你想要100%的屏幕不要将它与任何这样的东西相乘:

textOutputView: {
    flexDirection:'row',
    paddingTop:20,
    borderWidth:1,
    borderColor:'red',
    height:height,
    backgroundColor:'darkgrey',
    justifyContent:'flex-end'
}

Editted:

为了仅弯曲中心文本,可以采用不同的方法 - 解开其他视图。

  • 让flexDirection保持在'列'
  • 从容器中删除 alignItems : 'center'
  • alignSelf:'center' 添加到您不想弯曲的 alignSelf:'center'

您可以将Text组件包装在View组件中,并为View提供1的flex。

flex将给出:

如果 flexDirection:'row'flexDirection:'row' 100%宽度

如果 flexDirection:'column' 100%高度 flexDirection:'column' styles.container中的 flexDirection:'column'