React Native：如何将子组件滚动索引状态同步到父组件？

你的核心问题是子组件内部维护了独立的index状态，没有将更新后的值传递给父组件，同时父组件的传参存在变量名错误，导致两者状态无法同步。

方案1：状态提升（推荐） #

将索引状态统一放在父组件中维护，子组件直接使用父组件提供的状态和更新函数，避免状态冗余：

父组件修改： #

const Parent = () => {
  // 初始值设为0，满足初始加载显示索引的需求
  const [currentChildIndex, setCurrentChildIndex] = useState(0);

  return (
    <Child 
      currentIndex={currentChildIndex} 
      onIndexChange={setCurrentChildIndex} 
    />
  );
};

子组件修改： #

const Child = ({ currentIndex, onIndexChange }) => {
  // 移除子组件内部的index状态，直接使用父组件传递的状态和更新函数
  return (
    <FlatList
      contentContainerStyle={styles.contentContainer}
      ref={flatListRef}
      scrollEnabled
      showsVerticalScrollIndicator={false}
      data={videos}
      onMomentumScrollEnd={(e) => {
        const newIndex = Math.round(e.nativeEvent.contentOffset.x / width);
        // 调用父组件的更新函数，同步索引值
        onIndexChange(newIndex);
      }}
      onEndReachedThreshold={Platform.OS === "ios" ? 0 : 1}
    />
  );
};

方案2：子组件保留内部状态，通过回调同步给父组件 #

如果子组件需要单独使用索引状态，可以在更新自身状态的同时，调用父组件传递的回调函数：

父组件修改： #

const Parent = () => {
  const [currentChildIndex, setCurrentChildIndex] = useState(0);

  return (
    <Child 
      onIndexChange={setCurrentChildIndex} 
    />
  );
};

子组件修改： #

const Child = ({ onIndexChange }) => {
  const [index, setIndex] = useState(0);

  return (
    <FlatList
      contentContainerStyle={styles.contentContainer}
      ref={flatListRef}
      scrollEnabled
      showsVerticalScrollIndicator={false}
      data={videos}
      onMomentumScrollEnd={(e) => {
        const newIndex = Math.round(e.nativeEvent.contentOffset.x / width);
        // 更新子组件自身状态
        setIndex(newIndex);
        // 同步给父组件
        onIndexChange(newIndex);
      }}
      onEndReachedThreshold={Platform.OS === "ios" ? 0 : 1}
    />
  );
};

原代码的问题点说明 #

1. 父组件传参错误：原代码中<Child ChildIndex={ChildIndex} />里的ChildIndex是未定义变量，正确应该传递父组件的currentChildIndex，但仅传值无法实现反向同步。
2. 状态隔离：子组件内部的index状态和父组件的currentChildIndex是两个独立状态，彼此没有关联，自然无法同步更新。

内容的提问来源于stack exchange，提问作者Lorence