100%的宽度在React Native Flexbox

小开

编辑:

为了只伸缩中心文本，可以采用不同的方法——展开其他视图。

让flexDirection保持在column
从容器中删除alignItems : 'center'
将alignSelf:'center'添加到你不想伸缩的textview中

您可以将Text组件包装在View组件中，并将View的伸缩值设为1。

flex会给出:

如果styles.container中的flexDirection:'row'为100%宽度

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

小开

最佳答案

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

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

小开

你应该使用维

首先，定义维度。

import { Dimensions } from "react-native";


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

然后，像下面这样更改line1样式:

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

小开

使用javascript获取宽度和高度，并将它们添加到View的样式中。要获得完整的宽度和高度，使用Dimensions.get('window').width https://facebook.github.io/react-native/docs/dimensions.html < / p >

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

然后,

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

小开

首先添加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'
}

小开

注意:尽量充分理解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>

小开

给你:

只需更改line1样式如下所示:

line1: {
backgroundColor: '#FDD7E4',
width:'100%',
alignSelf:'center'
}

小开

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

效果会很好

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


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

小开

Style =\{\{width : "100%"}}

试试这个:

StyleSheet generated: {
"width": "80%",
"textAlign": "center",
"marginTop": 21.8625,
"fontWeight": "bold",
"fontSize": 16,
"color": "rgb(24, 24, 24)",
"fontFamily": "Trajan Pro",
"textShadowColor": "rgba(255, 255, 255, 0.2)",
"textShadowOffset": {
"width": 0,
"height": 0.5
}
}

小开

width: '100%'和alignSelf: 'stretch'不适合我。Dimensions不适合我的任务，因为我需要操作一个深度嵌套的视图。这是对我有效的方法，如果我重写你的代码。我只是添加了一些__abc3，并使用flex属性来实现所需的布局:

  {/* a column */}
<View style={styles.container}>
{/* some rows here */}
<Text style={styles.welcome}>
Welcome to React Natives
</Text>
{/* this row should take all available width */}
<View style=\{\{ flexDirection: 'row' }}>
{/* flex 1 makes the view take all available width */}
<View style=\{\{ flex: 1 }}>
<Text style={styles.line1}>
line1
</Text>
</View>
{/* I also had a button here, to the right of the text */}
</View>
{/* the rest of the rows */}
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>

小开

简单地使用width:'100%'

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