如何在 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