React Navigation headerRight 不可见

Question

我正在尝试在屏幕右侧呈现一个按钮 header 标题。但我没有得到想要的结果。我已经为我的屏幕推荐了 react-navigation 官方 doc. This is the screenshot。
这是我的导航代码片段。

 <NavigationContainer>
            <Stack.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.header.backgroundColor,
                },
                headerTintColor: Colors.header.fontColor,
                headerTitleAlign: 'left',
                headerTitleStyle: {
                    fontSize: Fonts.size.regular
                }
            }}>
                <Stack.Screen name='Home' component={Home} options={{
                    headerTitle: 'Seguro',
                    headerRight: () => {
                        <Button              // I want to render this button
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    }
                }} />
                <Stack.Screen name='Login' component={Login} />
            </Stack.Navigator>
        </NavigationContainer>

Answer 1

问题是你没有 returning 任何东西。

选项 1：隐式 return..括在方括号中使其隐式 return

<Stack.Screen name='Home' 
     component={Home} 
     options={{
                    headerTitle: 'Seguro',
                    headerRight: () => (
                        <Button             
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    )
            }} />

选项 2：显式 return

<Stack.Screen name='Home' 
     component={Home} 
     options={{
                    headerTitle: 'Seguro',
                    headerRight: () => { 
                       return (
                        <Button             
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    )
              }
            }} />