跳到主要内容

直接操作

有时需要直接对组件进行更改,而无需使用 state/props 来触发整个子树的重新渲染。例如,在浏览器中使用 React 时,有时需要直接修改 DOM 节点,移动应用程序中的视图也是如此。setNativeProps 是 React Native 中直接设置 DOM 节点属性的等效方法。

注意

当频繁重新渲染造成性能瓶颈时,请使用 setNativeProps

直接操作不是你会经常使用的工具。你通常只会在创建连续动画时使用它,以避免渲染组件层次结构和协调许多视图的开销。setNativeProps 是命令式的,并将状态存储在原生层(DOM、UIView 等)而不是 React 组件中,这使得你的代码更难以推断。

在使用它之前,尝试用 setStateshouldComponentUpdate 解决你的问题。

使用 TouchableOpacity 的 setNativeProps

TouchableOpacity 在内部使用 setNativeProps 来更新其子组件的透明度。

tsx
const viewRef = useRef<View>();
const setOpacityTo = useCallback(value => {
// Redacted: animation related code
viewRef.current.setNativeProps({
opacity: value,
});
}, []);

这允许我们编写以下代码,并且知道子组件的透明度将根据点击而更新,而子组件无需了解这一事实或需要对其实现进行任何更改。

tsx
<TouchableOpacity onPress={handlePress}>
<View>
<Text>Press me!</Text>
</View>
</TouchableOpacity>

假设 setNativeProps 不可用。在没有此限制的情况下,我们可能实现它的一种方法是将透明度值存储在状态中,然后每当触发 onPress 时更新该值。

tsx
const [buttonOpacity, setButtonOpacity] = useState(1);
return (
<TouchableOpacity
onPressIn={() => setButtonOpacity(0.5)}
onPressOut={() => setButtonOpacity(1)}>
<View style={{opacity: buttonOpacity}}>
<Text>Press me!</Text>
</View>
</TouchableOpacity>
);

与原始示例相比,这种方法计算量更大 - 每次透明度改变时,React 都需要重新渲染组件层次结构,即使视图及其子组件的其他属性没有改变。通常,这种开销不是问题,但在执行连续动画和响应手势时,明智地优化组件可以提高动画的保真度。

如果你查看 NativeMethodsMixinsetNativeProps 的实现,你会注意到它是 RCTUIManager.updateView 的一个包装器 - 这与重新渲染导致调用的函数完全相同 - 请参见 ReactNativeBaseComponent 中的 receiveComponent

复合组件和 setNativeProps

复合组件没有原生视图支持,因此你无法在其上调用 setNativeProps。请看以下示例:

如果你运行它,你将立即看到此错误:Touchable child must either be native or forward setNativeProps to a native component。发生这种情况是因为 MyButton 不直接由应该设置其不透明度的原生视图支持。你可以这样理解:如果你用 createReactClass 定义一个组件,你不会期望能够在其上设置样式属性并使其正常工作 - 你需要将样式属性传递给子组件,除非你正在包装一个原生组件。同样,我们将把 setNativeProps 转发给一个由原生支持的子组件。

将 setNativeProps 转发给子组件

由于 setNativeProps 方法存在于任何 View 组件的 ref 上,因此将自定义组件上的 ref 转发到它渲染的一个 组件就足够了。这意味着在自定义组件上调用 setNativeProps 将与您在包装的 View 组件本身上调用 setNativeProps 具有相同的效果。

您现在可以在 TouchableOpacity 中使用 MyButton 了!

您可能已经注意到我们使用 {...props} 将所有 props 传递给了子视图。这样做的原因是 TouchableOpacity 实际上是一个复合组件,因此除了依赖其子组件的 setNativeProps 之外,它还要求子组件执行触摸处理。为此,它传递了各种 props,这些 props 会回调 TouchableOpacity 组件。相比之下,TouchableHighlight 由原生视图支持,并且只要求我们实现 setNativeProps

使用 setNativeProps 编辑 TextInput 值

另一个非常常见的 setNativeProps 用例是编辑 TextInput 的值。当 bufferDelay 较低且用户输入速度非常快时,TextInput 的 controlled 属性有时会丢失字符。一些开发人员更喜欢完全跳过此属性,而是使用 setNativeProps 在必要时直接操作 TextInput 值。例如,以下代码演示了在点击按钮时编辑输入:

您可以使用 clear 方法来清除 TextInput,该方法使用相同的方法清除当前输入文本。

避免与 render 函数冲突

如果您更新了一个也由渲染函数管理的属性,您可能会遇到一些不可预测和令人困惑的错误,因为无论何时组件重新渲染并且该属性发生变化,之前从 setNativeProps 设置的任何值都将被完全忽略和覆盖。

setNativeProps 和 shouldComponentUpdate

通过智能地应用 shouldComponentUpdate,您可以避免协调未更改的组件子树所需的不必要开销,从而达到足以使用 setState 而不是 setNativeProps 的性能。

其他原生方法

此处描述的方法在 React Native 提供的多数默认组件上可用。但请注意,它们在非直接由原生视图支持的复合组件上是不可用的。这通常包括您在自己的应用程序中定义的大多数组件。

measure(callback)

确定给定视图在视口中的屏幕位置、宽度和高度,并通过异步回调返回这些值。如果成功,回调将使用以下参数调用:

  • x
  • y
  • width
  • height
  • pageX
  • pageY

请注意,这些测量值只有在原生渲染完成后才可用。如果您需要尽快获取测量值,并且不需要 pageXpageY,请考虑使用 onLayout 属性。

此外,measure() 返回的宽度和高度是组件在视口中的宽度和高度。如果您需要组件的实际大小,请考虑使用 onLayout 属性。

measureInWindow(callback)

确定给定视图在窗口中的位置,并通过异步回调返回这些值。如果 React 根视图嵌入到另一个原生视图中,这将为您提供绝对坐标。如果成功,回调将使用以下参数调用:

  • x
  • y
  • width
  • height

measureLayout(relativeToNativeComponentRef, onSuccess, onFail)

measure() 类似,但是测量视图相对于通过 relativeToNativeComponentRef 引用指定的祖先。这意味着返回的坐标是相对于祖先视图的原点 xy

注意

此方法也可以使用 relativeToNativeNode 处理程序(而不是引用)调用,但在新架构中此变体已过时。

focus()

请求给定输入或视图的焦点。触发的具体行为将取决于平台和视图类型。

blur()

移除输入或视图的焦点。这与 focus() 相反。