如何访问NavigatorScreen > Screen组件内的选项？

Question

有什么方法可以访问

options

组件内的导航器屏幕

Home

对象吗？

    <Stack.Navigator>
        <Stack.Screen
            name="Home"
            component={Home}
            options={
                {
                    /** some options... */
                }
            }
        />
        <Stack.Screen name="About" component={About} />
    </Stack.Navigator>

首页

function Home() {
    /** Get options object here */
    return (
        /** some jsx */
    );
}

我正在使用反应导航5

Answer 1

我发现的唯一方法是保留您的

ref

的

NavigationContainer

，然后使用

containerRef.getCurrentOptions()

。

我不喜欢全局引用，但似乎没有办法从钩子中获取选项。我只能找到

navigation.setOptions()

，但找不到关于 getOptions() 的信息。

就我而言，

containerRef.getCurrentOptions()

返回了这个：

{
  "tabBarStyle": [
    {
      "borderTopWidth": 1,
      "borderTopColor": "#EAECF0",
      "height": 97.20716112531969,
      "paddingTop": 9.720716112531969,
      "paddingBottom": 19.441432225063938
    },
    false
  ],
  "tabBarLabelStyle": {
    "fontSize": 12,
    "textAlign": "center"
  },
  "tabBarActiveTintColor": "#28C6C7",
  "tabBarInactiveTintColor": "#101828",
  "tabBarLabel": "Treatment",
  "title": "Current Treatment"
}

这就是我在导航器 screenOptions 中定义的内容以及各个

Stack.Screen

选项。

Answer 2

您可以将

navigation.setOptions

用于主屏幕

function Home({ navigation, route }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({ headerTitle: getHeaderTitle(route) });
  }, [navigation, route]);
}

有关更多详细信息，您可以阅读此文档屏幕选项