Question

我有一个包含View字段的React Native Text，并且我正在使用onLayout道具根据其提供的数据进行一些位置计算。

<View onLayout={this.calculateDimensions}>
  <Text>{this.props.content}</Text>
</View>

这很好用，但是在某些情况下，content道具会更新为具有相同字符大小的其他字符串。这将导致布局不发生变化，并且onLayout不会触发。

每次content道具更新时，都必须进行这些位置计算。

注意：我知道有很多方法可以使组件更新。更新是不一样的，布局并不令人遗憾，它不会触发onLayout。

Answer 1

您可以根据内容拥有唯一的密钥。每当组件的键属性发生更改时，就会强制重新渲染。

Answer 2

方法this.calculateDimensions需要具有某种指示，应再次调用它并重新渲染。我建议使用它的状态或备注。

让我为您展示React Hooks的示例。我正在使用回调onComponentLayout设置组件onLayout。 onComponentLayout的状态为componentHeight，该状态在更改时会重新渲染。因此，如果缺少componentHeight，我可以动态更改它。

...
const onComponentLayout = useCallback(({nativeEvent: {layout}}) => {
   !componentHeight && setComponentHeight(layout.height);
}, [componentHeight, setComponentHeight]);
...

return (
...
    <Component
      onLayout={onComponentLayout}
    />
...
)

在React Native视图上强制onLayout

2 个答案: