滚动无法在React Native中具有多行的水平FlatList中使用

Question

我想在react native中创建具有多行的水平平面列表，所以我已经编写了这段代码，该平面列表正在呈现，但是水平滚动不起作用，所以有人可以帮助我解决什么问题吗？

我想创建具有两行并且用户也可以水平滚动的平面列表

<FlatList
          contentContainerStyle={{ alignSelf: 'flex-start' }}
          numColumns={this.state.data.length / 2}
          showsVerticalScrollIndicator={false}
          horizontal={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.data}
          style={styles.listView}
          renderItem={({ item }) => (

            <TouchableWithoutFeedback onPress={() => this.onPressHandler(item.id)}>

              <View style={item.selected == true ?
                styles.SelectedPopularServiceView : styles.NormalPopularServiceView}>

                <View style={styles.PopularServiceTopView}>

                  <View style={styles.ViewTopName}>
                    <Text numberOfLines={33} style={styles.TextName}>
                      {item.Name}
                    </Text>
                    <Image source={imageShareData1} style={styles.ImageInfo} />
                  </View>

                  <View style={styles.ViewDiscount}>
                    <ImageBackground source={images.imageFlagGray} style={styles.BackGroundDiscount} >
                      <Text style={styles.TextDiscount}> {item.Discount}</Text>
                    </ImageBackground>
                  </View>

                </View>



                <View style={styles.ViewBottom}>

                  <View style={styles.ViewPrice}>
                    <Text style={styles.TextNewPrice}>
                      {item.NewPrice}
                    </Text>
                    <Text style={styles.TextOldPrice}>
                      {item.OldPrice}
                    </Text>
                  </View>

                  <View style={styles.ViewAdd}>
                    <Image source={images.imageButtonAdded} style={styles.ImageAdd} />
                  </View>

                </View>
              </View>
            </TouchableWithoutFeedback>

          )}

        />

Answer 1

您可以通过设置horizontal={true}并传递如下内容来简单地解决此问题：renderItem={<View style={{ flexDirection: column }}><YoureItem1 /><YoureItem2 /></View>}

例如：

const data = [
  [{ id: '0' }, { id: '1' }],
  [{ id: '2' }, { id: '3' }],
  [{ id: '4' }, { id: '5' }],
  [{ id: '6' }, { id: '7' }],
  [{ id: '8' }, { id: '9' }],
  [{ id: '10' }, { id: '11' }],
  [{ id: '12' }, { id: '13' }],
  [{ id: '14' }, { id: '15' }],
  [{ id: '16' }, { id: '17' }],
  [{ id: '18' }, { id: '19' }],
];

export default function App() {
  const renderItem = useCallback(({ item }) => {
    return (
      <View>
        <Card {...item[0]} />
        <Card {...item[1]} />
      </View>
    );
  }, []);

  const keyExtractor = useCallback((item) => {
    return item.id;
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        horizontal={true}
      />
    </View>
  );
}

This is sample snack for you