将 <View> 的宽度和高度传递给子组件

Question

我是新手。我有 <View> 的宽度和高度，我想将这些数据传递给包含这两个道具的 <Child> 组件。我已经解构了 <View> 布局的宽度和高度，但似乎我无法将这些变量传递给 <Child>(undefined name).

代码如下：

  <View onLayout={(event) => { let { width, height } = event.nativeEvent.layout;}} >
    <Child width={width} height={height } />
  </View>

谢谢

Answer 1

如果您注意代码，您会发现 width 和 height 不在范围内。它们存在于您的事件处理程序的范围内。因此，您将不存在的变量传递给 child.

此外，正确的方法是使用状态。例如，如果您的视图是在名为 AppView 的 class 中创建的，则

class AppView extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      width: null,
      height: null,
    }
  }
  render() {
    return (
      <View onLayout={(event) => {
        let { width, height } = event.nativeEvent.layout
        this.setState({width: width, height: height}
      }}>
        <Child width={this.state.width} height={this.state.height} />
      </View>
    )
  }
}

这样，每次触发 onLayout 事件时，它都会设置状态变量 width 和 height。然后将修改后的值传递给 child 元素。

Answer 2

使用 useState 挂钩的替代解决方案：

export default function App()  {

  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

    return (
      <View onLayout={(event) => {
        let { width, height } = event.nativeEvent.layout
        setWidth(width); setHeight(height);
      }}>
        <Child width={width} height={height} />
      </View>
    );
}

将 <View> 的宽度和高度传递给子组件

Pass width and height of a <View> to a child component

react-native

view

react-props