React Navigation 5 标题选项答案

【问题标题】：React Navigation 5 Header OptionsReact Navigation 5 标题选项
【发布时间】：2021-03-04 22:28:07
【问题描述】：

如何在上设置 Header right 属性？我用 screenOptions 尝试过，但它没有在标题右侧呈现 headerRight 内容。我可以在渲染此自定义组件的父导航组件上设置它，但在那里我无法访问导航道具。有人可以帮我吗？谢谢你

<NavigationContainer>
    <Stack.Navigator>
        <Stack.Screen options={options3} name="SellerStackNavigator" 
        component={SellerStackNavigator} />
    </Stack.Navigator>
</NavigationContainer>

const SellerStack = createStackNavigator();

const SellerStackNavigator = ({ navigation, route }) => {
  <SellerStack.Navigator
        screenOptions={({ route, navigation }) => ({
          headerRight: () => (
                <View style={{
                    flexDirection: 'row',
                    marginRight: 10,
                }}>
                    <TouchableOpacity style={{
                        backgroundColor: '#fff',
                        borderRadius: 20,
                        marginRight: 10,
                        marginTop: 10,
                        height: 40,
                        width: 40,
                        alignItems: 'center',
                        justifyContent: 'center',
                        elevation: 2,
                        paddingLeft: 10,
                    }}>
                        <Image style={{
                            resizeMode: 'contain',
                            alignSelf: 'center',
                            borderWidth: 1,
                            marginRight: 10,
                            tintColor: '#000',
                            width: 15,
                            height: 18,
                        }} source={Images.searchImage}/>
                    </TouchableOpacity>
                </View>
            )
        })}>
        .
        .
        .
        .
        .
        
  </SellerStack.Navigator>
}

【问题讨论】：

标签： react-native react-navigation react-navigation-v5 stack-navigator

【解决方案1】：

我或多或少地使用了你的代码并且正在为我工作，所以如果你能做一个博览会，我可以检查一下到底发生了什么https://snack.expo.io/@anthowm/headerright 无论如何，您可以使用 useNavigation 挂钩从任何地方访问您的导航

function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}

你可以访问它

<NavigationContainer>
    {(route, navigation) => {

return <Stack.Navigator>
        <Stack.Screen options={options3} name="SellerStackNavigator" 
        component={SellerStackNavigator} />
    </Stack.Navigator>}}
</NavigationContainer>

【讨论】：

嗨 Anthony，谢谢，但我不能使用 useNavigation 钩子，因为它是