滚动在 React Native 中多行的 Horizo​​ntal FlatList 中不起作用

Question

我想在 React Native 中创建多行的水平平面列表，所以我写了这段代码，平面列表正在渲染，但水平滚动不起作用，所以任何人都可以帮助我解决问题吗？

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

<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

Answer 2

只需要添加像这样包装平面列表的 ScrollView ：

<ScrollView horizontal>
    <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>

              )}

            />
</ScrollView>