React Native Flexbox中的宽度为100％

我已经阅读了几个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的build议，为包装添加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, }, 

Answer 1

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

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

Answer 2

你应该使用维度

首先，定义维度。

  var { AppRegistry, ... Dimensions } = React; var width = Dimensions.get('window').width; //full width var height = Dimensions.get('window').height; //full height 

那么，改变如下的line1风格：

 line1: { backgroundColor: '#FDD7E4', width: width, }, 

Answer 3

Editted：

为了只弯曲中心文字，可以采取不同的方法 – 解开其他视图。

• 让flexDirection保留在“列”
• 从容器中删除alignItems : 'center'
• 将alignSelf:'center'添加到不想弹性显示的文章

您可以将Text组件包装到一个View组件中，并赋予View为1的flex。

Flex会给：

如果flexDirection:'row' styles.container中的flexDirection:'row' ，则宽度为100％

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

Answer 4

使用JavaScript来获取宽度和高度，并将其添加到视图样式中。 要获得完整的宽度和高度，请使用Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html

 getSize() { return { width: Dimensions.get('window').width, height: Dimensions.get('window').height } } 

接着，

 <View style={[styles.overlay, this.getSize()]}> 

Answer 5

首先添加维度组件：

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

第二个定义variables：

 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，如果你想百分之百的屏幕不乘以这样的事情：

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