react native ref 怎么使用

Posted 2023-04-30

参考技术A

ref可以是字符串，也可以是函数，如下：

render()
    return <View ref='name' />//将组件view作为参数赋值给了this._view

这样你就可以通过this.refs.name取到这个View组件。

render()
    return <View ref= (e) => this._name = e  />//将组件view作为参数赋值给了this._name

可以通过this._name取到这个View组件。

接下来你就可以通过他来读写对象的变量，甚至调用对象的函数。

如何使用 ref 在 React Native Video 中编辑视频播放器道具

【中文标题】如何使用 ref 在 React Native Video 中编辑视频播放器道具

【英文标题】：How to edit video player props in React Native Video using ref

【发布时间】：2019-10-22 02:18:34

【问题描述】：

我正在使用 react-native-video。我正在尝试更改每个视频 onPress 的道具，它们位于视频的 FlatList 中。因此，如果我使用 state，它将更改整个 FlatList 中的所有视频道具，而我只想更改一个。

我创建了：const videoPlayer = [] 并在每个视频播放器中添加了一个引用，例如：ref=r => videoPlayer[item.id] = r，我知道我可以使用videoPlayer[item.id].presentFullscreenPlayer() 全屏播放视频，因为它是播放器的一种方法，但那又如何呢？控制 resizeMode 和 paused 等其他属性？

我试过videoPlayer[item.id].props.paused = false，但是没有效果。我还想象我可以在状态中创建某种复杂的对象，但是每次我更改属性时整个列表都会更新，这可能会导致大列表中的刷新运行缓慢。

那么，我有没有办法像我解释的那样控制每个视频的道具？

【参考方案1】：

你绝对可以使用setNativeProps，比如：

videoPlayer[item.id].setNativeProps( paused: false )

这是一个关于它的文档页面：https://facebook.github.io/react-native/docs/direct-manipulation

【讨论】：

这正是我想要的。谢谢！