React Native类组件FlatList点击返回后定位到正确位置的问题求助

步骤1：改造商品列表页（flatlist.js） #

核心逻辑是监听列表页的聚焦事件，从详情页返回时拿到目标商品ID，调用FlatList内置的滚动方法定位到对应位置。

class FlatlistScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount(){
    // 适配react-navigation路由的聚焦监听，若用其他路由可替换为对应生命周期/事件
    this.focusListener = this.props.navigation.addListener('focus', () => {
      const targetId = this.props.route.params?.targetScrollProductId;
      // 存在目标ID、FlatList实例、商品数据加载完成才执行滚动
      if(targetId && this.flatListRef && this.props.APIE?.length > 0){
        const targetIndex = this.props.APIE.findIndex(item => item._id === targetId);
        if(targetIndex !== -1){
          // 滚动到目标位置，可按需调整是否开启动画、对齐位置
          this.flatListRef.scrollToIndex({
            index: targetIndex,
            animated: true,
            viewPosition: 0 // 0=对齐列表顶部，0.5=居中，1=对齐底部
          });
          // 滚动完成后清空参数，避免下次进入页面重复触发滚动
          this.props.navigation.setParams({ targetScrollProductId: undefined });
        }
      }
    })
  }

  componentWillUnmount(){
    // 移除监听避免内存泄漏
    if(this.focusListener) this.focusListener.remove();
  }

  // 原有render逻辑保持不变，若滚动出现位置偏移，可给AnimatedFlatList添加getItemLayout属性预定义item高度：
  // getItemLayout={(data, index) => ({length: 单个商品高度, offset: 单个商品高度 * index, index})}
  render(){
    return(
      <SafeAreaView style={{flex: 1}}>
        <AnimatedFlatList
          // 原有属性保持不变
          style={{flex: 1}}
          ref={(ref) => this.flatListRef = ref}
          data={this.props.APIE}
          renderItem={this.renderItem}
          contentContainerStyle={{paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,}}
          keyExtractor={item => item._id}
          refreshing={this.state.refreshing}
          removeClippedSubviews={Platform.OS == "android" ? this.state.sticky.length > 0 : true}
          scrollEventThrottle={1}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={
                this.onRefresh.bind(this)
              }
              progressViewOffset={HEADER_MAX_HEIGHT}
            />
          }
          contentInset={{
            top: HEADER_MAX_HEIGHT,
          }}
          contentOffset={{
            y: -HEADER_MAX_HEIGHT,
          }}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true },
          )}
        />
      </SafeAreaView>
    )
  }
}

步骤2：改造商品详情页（productDetail.js） #

返回时将当前展示的商品ID传递给列表页，覆盖系统返回键和导航栏默认返回按钮的逻辑：

class ProductDetailScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
    // 重写导航栏自带返回按钮的点击逻辑，若用自定义导航可忽略此段
    this.props.navigation.setOptions({
      headerLeft: () => (
        <TouchableOpacity onPress={this.handleBackButtonClick}>
          <Text>返回</Text>
        </TouchableOpacity>
      )
    })
  }

  handleBackButtonClick = () => {
    // 取当前详情页的商品ID，替换为你自己的参数名（打开详情页时一定会传入商品ID）
    const currentProductId = this.props.route.params?.productId;
    // 返回列表页并携带目标商品ID
    this.props.navigation.navigate('FlatlistScreen', {
      targetScrollProductId: currentProductId
    });
    return true;
  }

  componentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  render(){
    return(
        <Text>Product Detail</Text>
    )
  }
}

特殊场景适配 #

• 若商品高度不固定导致scrollToIndex定位偏移，可将滚动方法替换为scrollToItem，参数直接传入目标商品对象即可
• 若未使用react-navigation路由，可通过全局状态（Redux/Context等）存储目标商品ID，列表页在componentDidUpdate中监听ID变化触发滚动即可
• 若存在多层详情页嵌套（列表→详情1→详情2），可逐层向上传递目标商品ID，最终传给列表页即可

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