如何在react native中检测元素何时在视图中

ovfsdjhp 于 2023-03-24 发布在 React

关注(0)|答案(1)|浏览(306)

我是一个在react native上工作的新手，我对如何能够检测到一个元素比如image/button在react-native的viewport中感到困惑，如果我能在用户滚动到该元素时获得console.log函数，那就太好了。
下面是我的代码，

<Block scroll  showsVerticalScrollIndicator={false}>  
    
    <Block color={colors.card} flex={0}> 
        <Block marginLeft={20} row  alignSelf="center" 
          scroll
          horizontal 
          renderToHardwareTextureAndroid
          showsHorizontalScrollIndicator={false}
          contentOffset={{x: -sizes.padding, y: 0}}>
          <SectionedMultiSelect 
                      styles={{button:styles.selectButton,container: styles.container,itemText:styles.sectionedMultiSelectItemText}}    
                      
                      items={categories}
                      IconRenderer={MaterialIcons} 
                      uniqueKey="id"
                      subKey="children"
                      selectText="Select Service..."
                      showDropDowns={true}
                      readOnlyHeadings={true}
                      onSelectedItemsChange={onSelectedItemsChange}
                      onSelectedItemObjectsChange={onSelectedItemObjectsChange}
                      selectedItems={selectedItems}
                      single={true}
                    /> 
                      
        </Block>
        
        <Block card flex={0} marginTop={1} marginHorizontal="2%">
          <Block  // I want to be able to detect that this is in view port hence user has seen it
              card  
              row={isHorizontal}
              marginBottom={sizes.sm}
              width={CARD_WIDTH * 2  + sizes.sm}>
              <TouchableOpacity>
              <Image alignSelf="center" // I would really like to be able to detect that this Image is in view port hence user has seen it
                source={{uri:'http://192.168.56.1:8000/directAd/uploads/'+topPageAd.picture }}
                style={{
                  width: win.width/1,
                    height: 150,  
                    resizeMode: "contain",
                    alignSelf: "center",
                    borderRadius: 20,
                }}
              />
              </TouchableOpacity>
               
            </Block>            
        </Block>            
        
        
    </Block>
</Block>

react-native

来源：https://stackoverflow.com/questions/75817604/how-to-detect-when-an-element-is-in-view-in-react-native

1条答案

按热度按时间

q3qa4bjr1#

在React Native中，你可以使用FlatList组件的onViewableItemsChanged prop来检测一个项目何时在viewport中。下面是一个如何使用它的例子：
首先，在代码中添加一个FlatList组件：import { FlatList } from 'react-native';

<FlatList
  data={yourData}
  renderItem={({ item }) => (
    <YourListItemComponent item={item} />
  )}
  onViewableItemsChanged={({ viewableItems }) => {
    console.log('Viewable items:', viewableItems);
  }}
  viewabilityConfig={{
    itemVisiblePercentThreshold: 50 // Change as needed
  }}
/>

在本例中，FlatList组件接受一个data prop和您的数据，一个renderItem prop用于呈现列表项，还有一个onViewableItemsChanged prop接受一个在可视项更改时调用的函数。
viewabilityConfig prop可以用来配置一个项目需要多少可见才能被认为是“可见的”。在这个例子中，我们说一个项目是可见的，如果它至少有50%是可见的。
当调用onViewableItemsChanged函数时，它会接收一个带有viewableItems属性的对象，该对象包含一个当前可查看项目的数组。您可以使用它来检测特定项目（例如图像）何时在视口中，并采取相应的操作。

赞(0）回复(0）举报 2023-03-24

我来回答

如何在react native中检测元素何时在视图中

1条答案

相关问题

热门标签

最新问答