如何在 React 或 React Native 中分隔项目

Question

我正在尝试分隔我的组件，但是我遇到了问题。 我希望我的网格占据屏幕的 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>

我有的

我所希望的

我能够得到外观，但我不得不将网格 flex 值更改为 12。我知道这不是正确的方法，所以我试图弄清楚如何做到这一点

Answer 1

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>

试试这个，不要忘记从 react-native 导入尺寸使用 cosnt {width} = 尺寸....退出返回语句。

Answer 2

您将flex: 1放在两个View中，这意味着两者都将尝试占用 50% 的空间 (1+1)。 如果你想让一个占 90%，另一个占 10%，那么一个需要flex: 9另一个需要flex: 1 。

只需更改 flex 值：

<View style={{flex: 9}}>
  <FlatGrid
    ...
  />
</View>
<View style={{flex: 1}}>
  <Icon name="settings" size={30} />
</View>

为了更清楚地说明：想象一下同一级别上的flex值的总和是 100%。 因为你有 2 flex: 1 ， 1+1=2=100%，所以 1=50%。
通过进行我建议的更改（ flex: 9和flex: 1 ），您可以将其视为 9+1=10=100%，因此 9=90% 和 1=10%。

Answer 3

您可以将齿轮图标设置为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>

使用以下 styles：

grid: {
    alignSelf: 'center',
    width: width * 0.9,
},
icon: {
    position: 'absolute',
    right: -iconSize,
    top: 0,
}

这是一个工作零食： https://snack.expo.dev/@hristoeftimov/absolute-icon