React Native Flexbox中的宽度为100％ [英] 100% width in React Native Flexbox

问题描述

我已经阅读了几个flexbox教程，但是我仍然无法完成这个简单的任务。

我怎样才能让红框达到100％的宽度？ / p>

代码：

 < View style = {styles.container}> 
< Text style = {styles.welcome}> 
欢迎使用React Natives 
< / Text> 
< Text style = {styles.line1}> 
 line1 
< / Text> 
< Text style = {styles.instructions}> 
按Cmd + R重新加载，{'\ n'} 
 Cmd + D或摇动开发菜单
< / Text> 
< / View> 
  

style：

  container：{
 flex：1，
 justifyContent：'center'，
 alignItems：'center'，
 backgroundColor：'＃F5FCFF'，
 borderWidth：1，
 flexDirection：'column'，
}，
 welcome：{
 fontSize：20，
 textAlign：'center'，
边距：10，
 borderWidth：1，
}，
 line1：{
 backgroundColor：'＃FDD7E4'，
}，
指令：{
 textAlign：'center'，
 color：'＃333333'，
 marginBottom：5，
 borderWidth：1，
}，
  
 $ p 
 $ p 
 $ b 
 更新1： 
 Nishanth Shankar的建议，增加
 flex：1为包装，
 flexDirection：'row'
 
 
 
输出：
 
 
 
  
 
 
 
 C ode： 
 
 
 < View style = {styles.container}> 
< View style = {{flex：1}}> 
< Text style = {styles.welcome}> 
欢迎使用React Natives 
< / Text> 
< / View> 
< View style = {{flex：1}}> 
< Text style = {styles.line1}> 
 line1 
< / Text> 
< / View> 
< View style = {{flex：1}}> 
< Text style = {styles.instructions}> 
按Cmd + R重新加载，{'\ n'} 
 Cmd + D或摇动开发菜单
< / Text> 
< / View> 
< / View> 
 $ b容器：{
 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'，
}，
指令：{
 textAlign：'center'，
 color：'＃333333'，
 marginBottom：5，
 borderWidth：1，
 
 
 $ b $ div 
 
解决方案
只要添加 alignSelf：stretch到项目的样式表。 
 
 
  line1：{
 backgroundColor：'＃FDD7E4'，
 alignSelf：'stretch'，
 textAlign：'center'，
}，
  
 
I have already read several flexbox tutorial, but I still cannot make this simple task to work.


How can I make the red box to 100% width?



Code:
  <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>
style:
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,
},
Thank you!

Update 1:
Suggestion by Nishanth Shankar, adding 
flex:1 for the wrapper, 
flexDirection: 'row'

Output:



Code:
  <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,
  },

解决方案
Simply add alignSelf: "stretch" to your item's stylesheet.
line1: {
    backgroundColor: '#FDD7E4',
    alignSelf: 'stretch',
    textAlign: 'center',
},


                        
这篇关于React Native Flexbox中的宽度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！