如何实现Stack Navigator的HeaderRight头像点击跳转页面（含嵌套TabNavigator）

Hey there! Let’s sort out why your headerRight avatar tap isn’t navigating to the profile screen—here’s what’s going wrong and how to fix it:

Key Issues in Your Current Code #

• You can’t directly access the navigation object from the static navigationOptions object. The navigate function you’re calling is undefined in that context.
• Your profile component uses a lowercase import (profile), which React will treat as a native HTML element instead of a custom component (React requires component names to start with an uppercase letter).

Step-by-Step Solution #

1. Turn navigationOptions into a Function #

Instead of defining navigationOptions as a static object, convert it to a function that accepts the navigation prop as an argument. This gives you direct access to navigation.navigate.

2. Fix Component Import Capitalization #

Rename your imported profile component to start with an uppercase letter, and update the screen reference in your Stack Navigator to match.

3. Update the onPress Handler #

Use navigation.navigate('profile') in your TouchableHighlight’s onPress callback now that you have access to the navigation object.

Modified Working Code #

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Dimensions, Image, TouchableHighlight } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vectoricons/MaterialIcons';
import NavigatorScreen from './src/Components/NavigatorScreen.js'
import Favourites from './src/Components/Favourites.js'
import Scenes from './src/Components/Scenes.js'
import Likes from './src/Components/Likes.js'
// Fix: Capitalize component name to follow React conventions
import Profile from './src/Components/Profile.js'

const Navigation = StackNavigator ({
  Register: {
    screen: NavigatorScreen,
    // Fix: Convert navigationOptions to a function to access the navigation prop
    navigationOptions: ({ navigation }) => ({
      headerTitle: 'SCENES',
      headerLeft: <Icon style={{marginLeft:18, color:'#000'}} name={'ios-notifications-outline'} size={28}/>,
      headerRight: (
        <View>
          <TouchableHighlight onPress={() => navigation.navigate("profile")}>
            <Image borderRadius={14} style={{width: 28, height: 28,marginRight: 18, borderWidth:1}} source={{uri : 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg'}} />
          </TouchableHighlight>
        </View>
      ),
      headerTintColor: 'white',
      headerStyle:{
        backgroundColor: '#fff',
        shadowOpacity: 0,
        shadowOffset: { height: 0, width:0 },
        shadowRadius: 0,
        elevation: 0,
      },
      headerTitleStyle: {
        color: '#36292a',
        fontFamily: 'WorkSans-Regular',
        fontWeight: '300',
        fontSize: 14,
        alignSelf: 'center'
      }
    })
  },
  profile: {
    // Fix: Use the capitalized component reference
    screen: Profile
  },
});

export default Navigation;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Why This Works #

• By making navigationOptions a function, we gain access to the navigation prop, which includes the navigate method needed to trigger screen transitions.
• Capitalizing the component name ensures React recognizes it as a custom component rather than a native element, eliminating potential rendering bugs.

内容的提问来源于stack exchange，提问作者Kamlesh Tilwani