如何将新闻事件传递到被另一个组件覆盖的组件？

Question

我有一个数据列表。 并且由于 ui 的某些原因，列表被不可见的滚动视图重叠。

scrollview仍然需要滚动。并且数据列表也应该是可触摸的。

但是，现在只有滚动功能起作用，数据没有被触及。

为此我能做什么？

代码是这样的：

          <View style={{ height: 500 }}>
            <View
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
              }}
            >
              {[1, 2, 3, 4, 5].map((data, index) => (
                <View
                  key={index}
                  style={{
                    height: 100,
                    borderWidth: 1,
                    borderColor: "black",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Pressable
                    style={{ width: 100, height: 30, backgroundColor: "red" }}
                    onPress={() => console.log(`pressed ${data}`)}
                  >
                    <Text>{data.toString()}</Text>
                  </Pressable>
                </View>
              ))}
            </View>
            <ScrollView
              style={{
                height: 500,
              }}
              contentContainerStyle={{
                backgroundColor: "gray",
                opacity: 0.5,
                height: 800,
              }}
            />
          </View>

我尝试使用react-native-gesture-handler，但失败了。 也许是因为我不知道如何使用它。

Answer 1

尝试将

pointerEvents="none"

设置为您的 ScrollView，这基本上会让您通过 ScrollView“传递”触摸。 更多信息在这里https://reactnative.dev/docs/view#pointerevents

...
   <ScrollView
          pointerEvents="none" // Here
          style={{
            height: 500,
          }}
          contentContainerStyle={{
            backgroundColor: 'gray',
            opacity: 0.5,
            height: 800,
          }}
        />
...