如何点击stack screen头部按钮在首页展示FlatList排序结果

这里提供3种适配不同场景的实现方式：

方案1：React Navigation 路由参数回传（最简便，适配绝大多数场景） #

如果你项目用的是React Navigation作为路由框架，直接通过路由携带参数回传触发首页刷新即可：

1. 排序选择页选中排序规则后，调用navigate跳转首页时携带排序参数

// 排序Stack Screen代码
import { useNavigation } from '@react-navigation/native';

const SortModalScreen = () => {
  const navigation = useNavigation();
  // 排序选项点击回调
  const onSortSelect = (sortRule) => {
    // 跳转首页同时携带排序规则参数
    navigation.navigate('Home', {
      sortRule: sortRule
    })
  }

  return (
    <View>
      <Button onPress={() => onSortSelect('price_asc')} title="价格从低到高" />
      <Button onPress={() => onSortSelect('sales_desc')} title="销量从高到低" />
      {/* 其他排序选项 */}
    </View>
  )
}

2. 首页监听路由参数变化，收到排序规则后重新处理列表数据刷新FlatList

// 首页代码
import { useRoute, useNavigation } from '@react-navigation/native';

const HomeScreen = () => {
  const route = useRoute();
  const navigation = useNavigation();
  const [rawList] = useState(你的原始列表数据);
  const [flatListData, setFlatListData] = useState(rawList);

  // 监听路由携带的排序参数
  useEffect(() => {
    const currentSortRule = route.params?.sortRule;
    if(currentSortRule) {
      // 浅拷贝原数组后执行排序，避免修改原数组
      const sortedList = [...rawList].sort((a, b) => {
        switch(currentSortRule) {
          case 'price_asc':
            return a.price - b.price;
          case 'sales_desc':
            return b.sales - a.sales;
          // 其他排序规则逻辑
          default:
            return 0;
        }
      })
      setFlatListData(sortedList);
      // 清除参数避免返回首页时重复触发排序
      navigation.setParams({ sortRule: undefined })
    }
  }, [route.params?.sortRule])

  return (
    <FlatList
      data={flatListData}
      renderItem={你的列表项渲染逻辑}
      keyExtractor={item => item.id.toString()}
    />
  )
}

方案2：全局状态管理（适合项目已接入状态管理工具的场景） #

如果你的项目已经接入了Zustand/Redux/Mobx等全局状态管理工具，可以把排序规则存在全局状态中：

1. 定义全局状态存储排序规则，这里以轻量的Zustand为例：

// 全局状态文件
import { create } from 'zustand'

const useGlobalStore = create((set) => ({
  listSortRule: null,
  setListSortRule: (rule) => set({ listSortRule: rule })
}))

2. 排序选择页选中规则后更新全局状态

const onSortSelect = (rule) => {
  useGlobalStore.getState().setListSortRule(rule);
  // 执行返回首页逻辑
  navigation.goBack();
}

3. 首页监听全局状态的listSortRule字段变化，触发列表排序刷新即可

方案3：事件总线（适合轻量项目不想接入状态管理的场景） #

可以用第三方事件库如react-native-event-listeners，或者自行实现简单的事件订阅分发：

1. 排序选择页选中规则后，发送携带排序参数的事件
2. 首页挂载时订阅事件，收到事件后触发列表排序，卸载时取消订阅即可

操作参考图示 #

步骤1 #

步骤2 #

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