RN 0.71.6 使用FlatList 设置horizontal水平滚动，导致内部的点击事件失效(或者说只有点击很上面部分才会出现效果)

DingTianYi9 commented 6 months ago

IOS上表现正常，Android上出现这个问题，滚动是正常的。

<FlatList ref={ref=>{ setFirstFlatList(ref) }} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} data={firstData} horizontal={true} ItemSeparatorComponent={() => } bounces={false} bouncesZoom={false} keyExtractor={(item, index) => index.toString()} renderItem={(data) => renderFirstListItem(data.item, data.index) } removeClippedSubviews={false} />

const renderFirstListItem = (item, index) => { const appImgSrcIcon = item?.category?.appImgSrc ? { uri: item.category.appImgSrc } : defaultCategoriesIcon return ( <TouchableOpacity onPress={() => { setIsShowMore(false) setShowTreeCheck(false) setSelectIndex(0) onPressFirstCategoriesItem(item, index); }} style={{ marginLeft: 3, marginRight: 3}}

<View style={ firstCategorieSeleted === index ? [ styles.listSecondCategoriesButtonStyle, { backgroundColor: "#fff" }, ] : [ styles.listSecondCategoriesButtonStyle, { backgroundColor: "transparent" }, ] }

<Text style={{ color: firstCategorieSeleted === index ? "#00984A" : "#fff", backgroundColor: "transparent", fontSize: ScreenUtil.setSpText(12), fontWeight: "bold", }}

{item.category.name} ); }

sunnylqm commented 6 months ago

用inspector看下是不是被什么挡住了，而且你这个描述最好配个录屏吧代码用markdown括起来，这根本看不清楚

sunnylqm commented 6 months ago

DingTianYi9 commented 6 months ago

实验发现给FlatList设置俩倍的高度就可以正常使用了

DingTianYi9 commented 6 months ago

<FlatList
            ref={ref=>{
              setFirstFlatList(ref)
            }}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            data={firstData}
            horizontal={true}
            ItemSeparatorComponent={() => <View />}
            bounces={false}
            bouncesZoom={false}
            keyExtractor={(item, index) => index.toString()}
            renderItem={(data) =>
              renderFirstListItem(data.item, data.index)
            }
            removeClippedSubviews={false}
          />

DingTianYi9 commented 6 months ago

const renderFirstListItem = (item, index) => {
    const appImgSrcIcon = item?.category?.appImgSrc
      ? { uri: item.category.appImgSrc }
      : defaultCategoriesIcon
    return (
      <TouchableOpacity
        onPress={() => {
          setIsShowMore(false)
          setShowTreeCheck(false)
          setSelectIndex(0)
          onPressFirstCategoriesItem(item, index);
        }}
        style={{ marginLeft: 3, marginRight: 3}}
      >
        <View style={styles.categoryContainer}>
          <View
            style={
              firstCategorieSeleted === index
                ? [
                    styles.categoryItem,
                    {
                      width: 50,
                      height: 50,
                      borderRadius: 50,
                      borderColor: "#fff",
                      borderWidth: 2,
                    },
                  ]
                : styles.categoryItem
            }
          >
            <FastImage
              source={appImgSrcIcon}
              style={
                firstCategorieSeleted === index
                  ? [
                      styles.categoryIcon,
                      { width: 46, height: 46, borderRadius: 46 },
                    ]
                  : styles.categoryIcon
              }
              resizeMode="contain"
            />
          </View>
        </View>
        <View
          style={
            firstCategorieSeleted === index
              ? [
                  styles.listSecondCategoriesButtonStyle,
                  { backgroundColor: "#fff" },
                ]
              : [
                  styles.listSecondCategoriesButtonStyle,
                  { backgroundColor: "transparent" },
                ]
          }
        >
          <Text
            style={{
              color: firstCategorieSeleted === index ? "#00984A" : "#fff",
              backgroundColor: "transparent",
              fontSize: ScreenUtil.setSpText(12),
              fontWeight: "bold",
            }}
          >
            {item.category.name}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

DingTianYi9 commented 6 months ago