React Native Flexbox 中的 100% 宽度
Posted
技术标签:
【中文标题】React Native Flexbox 中的 100% 宽度【英文标题】：100% width in React Native Flexbox 【发布时间】：2016-01-22 16:43:00 【问题描述】：我已经阅读了几个 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,
,
【问题讨论】：
【参考方案1】：只需将alignSelf: "stretch" 添加到您项目的样式表中。
line1:
backgroundColor: '#FDD7E4',
alignSelf: 'stretch',
textAlign: 'center',
,
【讨论】：
使用 alignSelf 拉伸，我遇到了 android 问题 - 我有一个具有“绝对”位置的图像，在这种情况下，即使使用“拉伸”，这样的框也会被填充到包含的元素的边缘之内。就我而言，Dimensions.get('window').width 适用于 ios 和 Android。 这种方法解决了我所有的“全宽”问题，请查看：snack.expo.io/S1PWQqkcZ 似乎width: "100%" 也应该可以工作，但它没有。我想我不明白alignSelf: "stretch" 与width: "100%" 什么时候有效。 @Corentin 有什么想法吗？谢谢！
@st_bk 是那里的救生员！但是，对于您绝对定位并需要伸展的事件，我找到了更好的解决方案：position: absolute, top: 0, bottom: 0, left: 0, right: 0
到@lance.dolan 点-如果您正在寻找100％的宽度，您实际上只需要左右参数。我也不是 100% 对此，但要使 alignStretch 规则起作用，您必须设置 flexDirection: 'row'，因为它默认设置为列。【参考方案2】：
你应该使用Dimensions
首先，定义维度。
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,
,
【讨论】：
谢谢Melih Mucuk！ alignSelf：Corentin S. 建议的“伸展”是最简单的，所以我接受了这个答案。然而，拥有Dimensions 让我找到了一种新的布局方式。在某些情况下，我们可以通过编程方式调整项目，谢谢！ @Melih 我发现返回的宽度在我的 Android 设备上是错误的。正确的宽度应该是 720px，但返回 360px。 @peacepassion，你得到了 360，因为你的设备 dpi 被缩放了 2 倍。试试Dimensions.get('window').scale - 在你的情况下这应该返回 2。
感谢您的回答，我正在处理一个有背景的容器，您的建议非常适合。
这在设备旋转时不起作用。最好使用自适应布局。【参考方案3】：
已编辑：
为了仅弯曲中心文本，可以采用不同的方法 - 取消其他视图的弯曲。
让 flexDirection 保持在“列” 从容器中删除alignItems : 'center'
将alignSelf:'center' 添加到您不想弯曲的文本视图中
您可以将 Text 组件包装在 View 组件中，并为 View 赋予 1 的 flex。
flex 会给出：
如果 style.container 中的 flexDirection:'row' 为 100% 宽度
如果 style.container 中的 flexDirection:'column' 为 100% 高度
【讨论】：
是的，我尝试设置 flexDirection:'row' 和 flex:1 使宽度达到 100%。但是，组件都是内联的，不能转到下一行。即使我使用了 flexWrap: 'wrap' 新方法 franfran 的运气好吗？ 由 Corentin S. 建议的 alignSelf: 'stretch' 作品。【参考方案4】：给你：
只需按以下方式更改 line1 样式：
line1:
backgroundColor: '#FDD7E4',
width:'100%',
alignSelf:'center'
【讨论】：
我很高兴这成功了！我不知道为什么，我认为百分比值在 RN 中不起作用......【参考方案5】：首先添加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'
【讨论】：
【参考方案6】：使用 javascript 获取宽度和高度并将它们添加到 View 的样式中。
要获得全宽和全高，请使用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()]>
【讨论】：
哦，我喜欢这个。可能不是最好的解决方案，但它确实解决了我的问题。更不用说它总体上是一个非常简洁的功能。【参考方案7】：注意：尝试充分理解 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>
【讨论】：
【参考方案8】：只需删除容器样式中的alignItems: 'center' 并将textAlign: "center" 添加到line1 样式中，如下所示。
效果很好
container:
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
borderWidth: 1,
line1:
backgroundColor: '#FDD7E4',
textAlign:'center'
,
【讨论】：
【参考方案9】：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
【讨论】：
请提供正确答案。如果没有先在此处解释其内容，请勿提供链接。【参考方案10】：只需使用 width:'100%'
line1:
backgroundColor: '#FDD7E4',
width: '100%'
,
【讨论】：
【参考方案11】：width: '100%' 和 alignSelf: 'stretch' 对我不起作用。 Dimensions 不适合我的任务，因为我需要在深度嵌套的视图上进行操作。如果我重写您的代码，这对我有用。我只是添加了一些Views 并使用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>
【讨论】：
以上是关于React Native Flexbox 中的 100% 宽度的主要内容，如果未能解决你的问题，请参考以下文章