React Native 使用 header 图标在抽屉 header 和特定屏幕之间发送参数

Question

我从 React Native 开始，我想在特定屏幕上打开一个输入搜索字段，以使用右侧的 header 图标（搜索图标）过滤该屏幕上显示的一些结果。

我能够在Drawer.Screen上使用initialParams并且我可以在屏幕加载时在结果屏幕上console.log该参数。 当我点击已经在结果屏幕上的 header 图标时，我只是不知道如何再次传递此参数（如true ）。

app.routes.tsx：

const Drawer = createDrawerNavigator();

export function AppRoutes() {

const [openFilter, setOpenFilter] = useState(false);

return(
...
<Drawer.Screen
    name="Results"
    component={Home}
    initialParams={{ openFilter: openFilter }}
    options={{
        headerRight: ({}) => (
            <BorderlessButton
                onPress={() => {
                    setOpenFilter(true);
                    console.log(openFilter);
                }}
            >
                <Feather name="search" size={24} color={theme.colors.heading} style={{ marginRight: 15 }} />
            </BorderlessButton>
        ),
    }}
/>;
}

主页.tsx:

export function Home({ route }: any) {

    const openFilter = route.params.openFilter;
    console.log(openFilter);
    const [filter, setFilter] = useState(false); // I would manage filter to be true

return(
...
    {filter &&
        <View style={{ marginBottom: 24, paddingHorizontal: 10 }}>
           <TextInput
              style={{ borderBottomColor: 'white', borderBottomWidth: 1 }}
           />
       </View>
    }
...

我认为，如果我通过单击 header 图标将openFilter变为true ，我可以显示输入文本。 我应该重新渲染结果屏幕吗？

Answer 1

我从navigation中找到了一种方法，我用它来管理屏幕之间的导航，我可以用它发送任何参数：

const Drawer = createDrawerNavigator();

export function AppRoutes() {

const navigation: any = useNavigation();
const [openFilter, setOpenFilter] = useState(false);

return(
...
<Drawer.Screen
    name="Results"
    component={Home}
    initialParams={{ openFilter: openFilter }}
    options={{
        headerRight: ({}) => (
            <BorderlessButton
                onPress={() => {
                    navigation.setParams({ openFilter: openFilter}); // here is the method from navigation
                }}
            >
                <Feather name="search" size={24} color={theme.colors.heading} style={{ marginRight: 15 }} />
            </BorderlessButton>
        ),
    }}
/>;
}

现在我可以在主屏幕上获取openFilter或任何其他参数。