Question

我想使用抽屉式导航器通过在每次触发App函数时将参数从Home传递到getFilters屏幕来过滤屏幕上的项目，我打算这是错误的方式吗？

export default function App() {
  const [filters, setFilters] = React.useState([]);

  getFilters = (filterArr) => {
    setFilters(filterArr)
  }

  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerContent={props => <CustomDrawerContent {...props} func={this.getFilters} />}>
        <Drawer.Screen 
        name="Home" 
        component={HomeScreen}
        initialParams={{theFilters:filters}}/>
        <Drawer.Screen name="Notifications" component={FavesScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

我的应用程序有一个抽屉式导航器，我在其中添加了下拉选择器，用户可以选择项目，我希望它可以过滤主屏幕上显示的结果。

我的问题是我不知道如何将数据发送到此处的主屏幕

<Drawer.Screen 
    name="Home" 
    component={HomeScreen}
    initialParams={{theFilters:filters}}/>

如果我硬编码initialParams = {{theFilters：“ filters”}}}，它就可以正常工作。但是我不想只是设置initialParam，我希望每当调用getFilters函数时重新渲染屏幕。

如果我在getFilters函数中添加了一个警报，它将按预期工作，并显示一个警报，其中包含用户选择的所有过滤器，因此数据肯定存在。如果需要，我可以提供更多详细信息

Answer 1

如果您只想更新组件，则可以使用useLayoutEffect，在这种情况下，您可以在函数中设置一个“ filters”值，它将呈现您的组件这是一个例子：

  useLayoutEffect(()=>{
    this.getFilters()
    }
  },[filters])

，您将看到包含更新数据的组件

Answer 2

我使用了一个厚颜无耻的解决方法，而不是尝试将功能传递给组件，而是使用@ react-native-community / async-storage。

使setFilters函数将数据存储到用户电话中，并在我的home函数中添加一个事件侦听器，以便当用户关闭导航抽屉时，其状态将使用异步存储getItem函数的内容进行更新。

非常好，因为现在用户可以完全关闭该应用，除非他们使用重置按钮，否则产品页面将被过滤

React Navigation v5使用抽屉过滤屏幕上的详细信息

2 个答案: