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或任何其他參數。