在 React Native 视图上强制 onLayout答案

【问题标题】：Forcing onLayout on React Native view在 React Native 视图上强制 onLayout
【发布时间】：2019-01-18 01:04:12
【问题描述】：

我有一个 React Native View 包含一个 Text 字段，我正在使用 onLayout 属性进行一些位置计算，这些计算依赖于它提供的数据。

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

这很好用，但在某些情况下，content 属性会更新为具有相同字符大小的不同字符串。这会导致布局不会改变，onLayout 不会触发。

每次content 属性更新时都必须进行这些位置计算。

注意：我知道有很多方法可以更新组件。更新与布局不同，遗憾的是不会触发onLayout。

【问题讨论】：

如果一切都失败了，您是否尝试过将content 用作key 用于View？每次content 更改时都会创建一个全新的View 组件，但根据用例可能值得。 <View onLayout={this.calculateDimensions} key={this.props.content}>
@CAJE 你想明白了吗？我目前正在尝试使用 PanResponder 在特定时刻触发 onLayout 事件。如果您有任何见解，请告诉我。谢谢！
@SebastijanDumančić 恐怕除了 Tholle 的黑客攻击之外，我没有任何见解。我不得不求助于那个。

标签： javascript ios reactjs react-native react-native-ios

【解决方案1】：

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

【讨论】：

这个帖子必须被接受为答案。谢谢汤姆。

【解决方案2】：

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

让我向您展示一个使用 React Hooks 的示例。我正在设置组件onLayout，它使用回调onComponentLayout。 onComponentLayout 有状态 componentHeight，只要它改变就会重新渲染。因此，如果缺少 componentHeight，我可以动态更改它。

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

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

【讨论】：