Question

我想要一个类似react visibility sensor的功能，但使用react-native。我有一个包含多个项目的平面列表（每个项目都有不同的高度）。我想检测一个特定的项目（比如说第5个项目）是否进入视口以及何时退出

Answer 1

您可以使用onViewableItemsChanged来检查屏幕上有哪些viewableItems。

这是一个虚拟的类示例：

class Demo extends Component {
  constructor() {
    super();
    this.viewabilityConfig = {
      viewAreaCoveragePercentThreshold: 95
    }
  }
  onViewableItemsChanged = ({ viewableItems }) => {
    // viewableItems will show you what items are in view
  }
  render() {
    <FlatList
      ...
      onViewableItemsChanged={this.onViewableItemsChanged}
      viewabilityConfig={this.viewabilityConfig}
    />
  }
}

您需要相应地修改viewAreaCoveragePercentThreshold。

Answer 2

您可以像这样从'@ skele / components'使用视口：

0。。安装Skele组件：毛线添加@ skele / components或npm install @ skele / components

1。。使用Viewport.Tracker包装可滚动视图

    import { Viewport } from '@skele/components'
    ...
    render() {
        return (
            <Viewport.Tracker>
                <ScrollView scrollEventThrottle={16}>
                    { this.props.children }
                </ScrollView>
            </Viewport.Tracker>
        );
    }

2。。将其子组件设置为Viewport.Aware

import { Image } from 'react-native'
import { Viewport } from '@skele/components'
...
const ViewportAwareImage = Viewport.Aware(Image)
...
render() {
    return (
        <ViewportAwareImage
            source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
            onViewportEnter={() => console.log('Entered!')}
            onViewportLeave={() => console.log('Left!')} 
        />
    );
}

有关更多信息，请访问this link

Answer 3

您可以尝试react-native-inviewport

安装

<input type="number" name="teste" id="teste"
       value="0" min="0" max="7" 
       onchange="javascript: if (this.value > this.max) this.value = this.max;" />

样品

sudo npm react-native-inviewport@latest --save

如何在React Native中检测视图在视口或窗口中是否可见？

3 个答案: