返回按钮以纠正平面列表的位置答案

【问题标题】：Back button to correct position of flatlist返回按钮以纠正平面列表的位置
【发布时间】：2021-09-03 08:26:04
【问题描述】：

我有一个包含许多产品的平面列表。例如。我单击批次 20，它将继续显示产品详细信息。在产品详细信息屏幕中具有对其他产品的搜索功能。如果搜索批次 1，它将显示批次 1 的产品详细信息。但是当单击返回按钮时，它会在产品 20 的位置显示平面列表屏幕，我希望它在产品 1 的位置显示平面列表屏幕。我正在使用反应本机类组件。有人可以帮忙吗？

flatlist.js

 class FlatlistScreen extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
    };

  }

componentDidMount(){

}

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>
)
}
}

productDetail.js

class ProductDetailScreen extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
    };

  }

componentDidMount(){
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {

    return true;
}

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

【问题讨论】：

这能回答你的问题吗？ React-Native scroll to top with Flatlist
@GiovanniEsposito no.. 我的问题是来自另一个屏幕的后退按钮。当我从产品 1 详细屏幕返回时，假设显示带有产品 1、2、3 的平面列表屏幕，但现在它显示 19、20、21
当您点击go back时，您只需拦截此事件并调用this.flatListRef.scrollToOffset({ animated: true, offset: 0 });。这就是我认为您的问题重复的原因。
可以举个例子如何在类组件中使用吗？
贴一些代码否则我不知道从哪里开始=）

标签： react-native

【解决方案1】：

在this.renderItem 上，您可能使用ProductDetailScreen 来渲染this.props.APIE 元素。好吧，你可以给ProductDetailScreen 添加一个道具，比如：

<ProductDetailScreen onGoBack={this.scrollToTop} /*other props*/ />

this.scrollToTop 看起来像：

scrollToTop() {
   this.flatListRef.scrollToOffset({ animated: true, offset: 0 });
}

这就是将 Flatlist 滑到顶部的函数。

好的，现在在ProductDetailScreen 组件上，当我们返回时（我的意思是，在handleBackButtonClick 函数上）我们可以调用props.onGoBack()：

class ProductDetailScreen extends React.Component {
    ...
    handleBackButtonClick() {
       props.onGoBack();
       return true;
    }
    ...
}

就是这样。现在，当您从产品详细信息返回时，FlatList 将滚动到顶部。

【讨论】：