React导航5标题选项

Question

如何在上设置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>
}

​

Answer 1

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

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>