在列之間反應 Native FlatList 分隔符

Question

我有一個包含多列的 FlatList：

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

和一個行分隔符：

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

但是分隔符只出現在行之間，而不是列之間（即使我添加width: 0.5

在 expo 上查看

Answer 1

您可以在 renderItems 中添加 if else 條件並檢查索引模數以添加分隔符..我只使用這個，一切都很好。

類似的東西：-

 _renderItem = ({item,index}) => { return( <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}> <Text>{item.key}</Text> </View> ) }

希望這會幫助你。

Answer 2

我有點參加派對，但我遇到了同樣的問題，並通過使用這個 renderRow 代碼解決了這個問題。 我在網格視圖中有 2 列。 請通過替換索引 % X === 0和索引 <= Y中的 X 來更改列長度，其中 Y 是 columns-1

renderRow({ item, index }) {
    return (
      <View style={[styles.GridViewContainer, 
                    index % 2 === 0 ? {
                      borderLeftWidth: 1, borderLeftColor: 'black',
                      borderRightWidth: 1, borderRightColor: 'black',} 
                      : 
                      {borderRightWidth: 1, borderRightColor: 'black'}

                      ,{borderBottomWidth: 1, borderBottomColor: 'black'}
                      ,index <= 1 && {borderTopWidth: 1, borderBottomColor: 'black'}
                    ]}
      >

      ... render item code ...
        </View>
    )
  }

Answer 3

抱歉，我也沒有找到使用 flatlist 組件中的屬性添加列分隔符的方法。 所以我只是在渲染項中的文本組件之外添加了視圖，如下所示：

export default class App extends Component {

 render() {
  return (
   <View style={styles.view}>
    <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      renderItem={({ item }) => (
        <View style={styles.separator}>
          <Text style={styles.text}>{item}</Text>
        </View>
      )}
    />
   </View>
  );
 }
}

const styles = StyleSheet.create({
 view: {
  paddingTop: 30,
 },
 text: {
  flex: 1,
  fontSize: 40,
  textAlign: 'center'
 },
 separator: {
  flex: 1, 
  borderWidth: 1, 
  borderColor: 'red'
 },
});

這是結果：

我希望這可以幫助你。 :)

Answer 4

您可以在 Text 組件周圍添加一個 View 包裝器並將 borderRight 樣式應用於 View 組件，請參見此處的示例： https : //snack.expo.io/HJx68bKvb ，嘗試在 Expo 上的 Android 模擬器中運行，Expo 的 iOS 模擬器原因沒有正確顯示邊框，而是在我的本地模擬器上工作。

您可以在 View 組件和 Text 組件上使用填充來獲得所需的邊框位置。

Answer 5

我看了你的世博會。 如下所示。

 1   2   3   4 
---------------
 5   6   7   8 

我假設你想要如下。

 1 | 2 | 3 | 4 
---+---+---+---
 5 | 6 | 7 | 8 

為此，僅使用ItemSeparatorComponent是不可能的。 正如 Hazim Ali 所說，每個索引使用不同的樣式。

renderItem={({ item, index }) => (
        <Text style={[styles.text, index % 4 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'red'}]}>{item}</Text>
    )}

這是完整的示例。

——

但是分隔符只出現在行之間，而不出現在列之間

據我閱讀源代碼，當 numColumns > 2 時，列之間沒有項目分隔符。 Itemseparator 僅在行和行之間。

這是示例。 當 numColumns 設置為 4 時，四個項目被分組到一個單元格中。 一個 itemSeparator 放在單元格之間。

 1   2   3   4  <- cell1
--------------- <- itemSeparator
 5   6   7   8  <- cell2

Answer 6

如果將來有人遇到這個問題，我發現了一個使用 flexbox 的替代方案。

FlatList 接受 columnwrapperStyle 所以 justifyContent: 'space-around' 的樣式就可以了

然后對於在 renderItem 中返回的元素，給出一個可被 1 整除的 flex，因此如果 numColumns 為 2，則將 renderItem 的 flex 設置為大約 0.45

<FlatList
numColumns={2}
ItemSeparatorComponent={() => (
              <View style={{ backgroundColor: "green", height: 2 }} />
            )}
 columnWrapperStyle={{
       justifyContent: "space-between",
     }}
renderItem={({item, index}) => <View style={{flex: 0.45, height: 120, backgroundColor: '#dedede' }}>
<Text>{index}</Text>
</View>}
/>

Answer 7

使用 flatlist 的索引值添加另一個具有背景顏色和寬度的視圖

我在索引中有 4 個值，所以我使用 index-3 將分隔符視圖傳遞到索引 3。

                     <FlatList
                      data={status_project}
                      horizontal={true}
                      showsHorizontalScrollIndicator={false}
                      keyExtractor={(item, index) => index.toString()}
                      renderItem={({ item, index }) => {
                        return (
                          <>
                            <TouchableOpacity
                              onPress={() => {
                                this.setState({ status_selection: index });
                                console.log("Pressed");
                              }}
                            >
                              <View
                                style={{
                                  marginHorizontal: 2,
                                  paddingVertical: 5,
                                }}
                              >
                                <View
                                  style={{
                                    backgroundColor:
                                      this.state.status_selection === index
                                        ? "#fff"
                                        : "transparent",
                                    paddingVertical: 10,
                                    borderRadius: 8,
                                    width: windowWidth / 4 - 8,
                                    height: 40,
                                    alignItems: "center",
                                  }}
                                >
                                  <Text
                                    style={[
                                      { textAlign: "center", fontWeight: "bold" },
                                      {
                                        color:
                                          this.state.status_selection === index
                                            ? Colors.primary_color
                                            : "black",
                                      },
                                    ]}
                                  >
                                    {item.title}
                                  </Text>
                                </View>
                              </View>
                            </TouchableOpacity>
                            <View
                              style={{
                                backgroundColor:
                                  index - 3 ? Colors.tab_bar_color : "transparent",
                                width: 0.5,
                              }}
                            ></View>
                          </>`
                        );
                      }}
                    />

Answer 8

這將幫助您：

<FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      renderItem={({ item ,index}) => (
        <>
        <Text style={styles.text}>{item}</Text>
        <View
                      style={{
                        backgroundColor:
                          index - 3 ? 'red': "transparent",
                        width: 0.5,
                      }}
                    ></View>
                    </>
      )}
    />

Answer 9

您可以為每個項目提供一個邊距，並為容器提供一個負邊距。 這是 CSS flex 布局的一個非常常見的技巧。

  renderItem = (sale) => {
    const {item, index} = sale;
    return (
      <View style={{flex:1, backgroundColor:'#f00', margin:20}}>  ### LOOK AT HERE ###
      </View>
    )
  };

  render() {
    return (
    <View style={{flex:1,}} >
      <FlatList
        style={{ margin:-20}}   ### LOOK AT HERE ###
        data={this.state.sales}
        numColumns={2}
        renderItem={this.renderItem}
      />
    </View>
    )
  }

點擊這里查看我的作品