[英]How to space items in React or React Native
I am trying to space my components however I am having issues.我正在尝试分隔我的组件,但是我遇到了问题。 I would like my grid to take up 90% of the screen and the gear icon to take 10%
我希望我的网格占据屏幕的 90%,齿轮图标占据 10%
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{flex: 1}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
</View>
I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this我能够得到外观,但我不得不将网格 flex 值更改为 12。我知道这不是正确的方法,所以我试图弄清楚如何做到这一点
const {width} = Dimensions.get('window');
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{width : 0.9*width}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{width : 0.1*width}}>
<Icon name="settings" size={30} />
</View>
</View>
try this, don't forget to import Dimensions from react-native use cosnt {width} = Dimensions.... out of return statement.试试这个,不要忘记从 react-native 导入尺寸使用 cosnt {width} = 尺寸....退出返回语句。
You put flex: 1
in both View
s, this means that both will try to take up 50% of the space (1+1).您将
flex: 1
放在两个View
中,这意味着两者都将尝试占用 50% 的空间 (1+1)。 If you want one to take 90% and the other one 10%, one will need flex: 9
and the other one flex: 1
.如果你想让一个占 90%,另一个占 10%,那么一个需要
flex: 9
另一个需要flex: 1
。
Just change the flex values:只需更改 flex 值:
<View style={{flex: 9}}>
<FlatGrid
...
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
To try to make it clearer: just imagine the sum of the flex
values on the same level are 100%.为了更清楚地说明:想象一下同一级别上的
flex
值的总和是 100%。 Since you had 2 flex: 1
, 1+1=2=100%, so 1=50%.因为你有 2
flex: 1
, 1+1=2=100%,所以 1=50%。
By making the change I suggested ( flex: 9
and flex: 1
) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.通过进行我建议的更改(
flex: 9
和flex: 1
),您可以将其视为 9+1=10=100%,因此 9=90% 和 1=10%。
You can set your gear icon as an absolute
element:您可以将齿轮图标设置为
absolute
元素:
<View style={styles.grid}>
<Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
with the following styles:使用以下 styles:
grid: {
alignSelf: 'center',
width: width * 0.9,
},
icon: {
position: 'absolute',
right: -iconSize,
top: 0,
}
Here is a working snack: https://snack.expo.dev/@hristoeftimov/absolute-icon这是一个工作零食: https://snack.expo.dev/@hristoeftimov/absolute-icon
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.