React Navigation headerRight 不可见

Question

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

 <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

问题是你没有返回任何东西。

选项1：隐式返回..括在括号中使其隐式返回

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

选项 2：显式返回

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