如何解决reactNative中获取容器高度计算填充个数超过容器

在React Native中，可以使用onLayout属性来获取容器的高度。onLayout是一个回调函数，当组件布局完成后会被调用。

首先，在需要获取容器高度的组件上添加onLayout属性，将其指向一个函数：

<View onLayout={this.handleLayout}>
  {/* 内容 */}
</View>

然后，在组件的方法中定义handleLayout函数，该函数将会接收一个包含容器布局信息的事件对象：

handleLayout = (event) => {
  const { height } = event.nativeEvent.layout;
  // 在这里可以获取到容器的高度
  console.log('容器高度：', height);
}

接下来，你可以根据容器的高度来计算填充的个数，并将其渲染到容器中。例如，你可以使用一个for循环来生成一定数量的填充元素：

render() {
  const { containerHeight } = this.state;
  const fillCount = Math.floor(containerHeight / 50); // 假设每个填充元素的高度为50

  const fills = [];
  for (let i = 0; i < fillCount; i++) {
    fills.push(<View key={i} style={{ height: 50, backgroundColor: 'blue' }} />);
  }

  return (
    <View onLayout={this.handleLayout}>
      {/* 填充元素 */}
      {fills}
    </View>
  );
}

在上述示例中，我们假设每个填充元素的高度为50，并根据容器的高度计算出填充的个数。然后，通过一个循环生成相应数量的填充元素，并将其渲染到容器中。

注意，上述示例中使用了state来保存容器的高度，这是因为onLayout事件只会在组件的布局发生变化时被触发。如果你希望在组件的初始渲染时就能获取到容器的高度，可以在componentDidMount生命周期方法中手动触发一次onLayout事件：

componentDidMount() {
  this.handleLayout({ nativeEvent: { layout: { height: 0 } } });
}

通过上述方式，你可以在React Native中获取容器的高度，并根据需要计算填充的个数，超过容器的情况下进行相应处理。