react-native - 在堆栈导航器托管的屏幕内访问 `headerRight`

Question

我创建了一个堆栈导航器:

import {createStackNavigator} from '@react-navigation/stack';

const TheStack = createStackNavigator();

然后，这是我的导航器，它声称 component={LandingScreen}:

<TheStack.Navigator ...>
  <TheStack.Screen
        name="LandingScreen"
        component={LandingScreen}
        options={{
          title: '',
          headerLeft: null,
          headerRight: () => (
            <MyHeaderRightComponent />
          ),
        }}
      />

<TheStack.Navigator>

正如您在屏幕的选项中看到的那样，有headerRight，我已经声明使用MyHeaderRightComponent作为headerRight 以便它显示在屏幕标题的右侧。

这是我的LandingScreen.js:

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';

const LandingScreen = ({navigation}) => {
   // How can I access the `headerRight` component I have set above from here? 
   ...
}

我的问题是如何访问 LandingScreen.js 中的 headerRight？我知道我可以通过以下方式更新或重置 headerRight:

navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})

但现在我需要的是访问之前已经设置好的组件，而不是设置一个新组件。如何做到这一点？

Answer 1

根据评论中收到的请求编辑答案。答案是一样的。这只是进一步演示如何使用它。

// The screen component where you want to pass the state.

const Screen = (props) => {
  const [color, setColor] = useState("#CCCCCC");

  const { navigation } = props //This is important or else UseEffect will be called each time any of the props change

  useEffect(() => {
    navigation.setParams({ color: color }); // Where its being passed.
  }, [color, navigation]);

  return (
   <>
    <Button onPress={() => setColor("#800000")} /> // Change the color state to Maroon
    <Button onPress={() => setColor("#FED700")} /> // Change the color state to Gold
   </>
  )
}

您的 header 组件:

const MyHeaderComponent = (props) {
  return(
    <View style={{ backgroundColor: props.bgColor }} />
  )
}

然后你可以在 headerRight 中检索这个位。像这样:

headerRight:() => <MyHeaderComponent bgColor={route.params.color} />

注意:此方法对React Navigation v5有效.版本 4 有一个 getParams() 函数来检索参数，但它在版本 5 中被删除了。

---

原始答案

您可以在屏幕中创建一个 useState Hook 并将其值传递到您的 header 组件中。因此，当 header 组件更新状态时，可以从您定义状态的屏幕内访问它。

您可以使用 setParams() 函数来设置要在 header 组件中使用的参数。然后，使用 route.params.nameofyourprop 将它们放入 headerComponent 中，您可以在其中使用它。

这是将参数从 header 外部传递到 header 内部。

headerRight:() => <MyHeaderRightComponent propname={route.params.propvalue} />

这是为了从您的 header 外部设置参数，您可以在 headerRight 组件内访问它。

const [values, setValue] = useState()

navigation.setParams({propname: value})

这样您就可以在页眉和屏幕之间传递状态。

您也可以通过这种方式传递 useState 的 setValue 函数，但它会抛出警告，因为函数是 Javascript 中的对象，因此无法对它们进行索引……或类似的内容。