我如何在堆栈导航中导航屏幕

Question

下面的代码是我的主要导航。我在 Buzz 的标题中制作了一个图标，我想在 onPress 中将 Setting 屏幕调用为该图标，但我不知道如何在主导航器中调用该屏幕。我的所有其他屏幕都可以正常使用 this.props.navigation.navigate，因为它没有在主导航中调用。

import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TouchableOpacity} from 'react-native';
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';

//Local Components

import Setting from './BuzzScreen/Setting';
import Members from './TopTab/Members';
import Buzz from './Buzz';

const Home = createStackNavigator(
    { 

        Setting: Setting,
        Members: Members,
        Buzz: 
        {
            screen: Buzz,
            navigationOptions: {
                headerTitle: 'Create a Buzz',
                headerRight: () => (
                    <View style={styles.iconContainer}>
                        <TouchableOpacity onPress={()=>this.state.Setting}> // error here
                            <Icon
                                style={{ margin: 10, fontSize: 18 }}
                                name='cog'
                                type='FontAwesome'
                                color='#ffff'
                            />
                        </TouchableOpacity>
                    </View>
                ),
            },
        },
    },
    {
        initialRouteName: 'LoginUser',
        defaultNavigationOptions: {  
            headerStyle: {
                backgroundColor: '#744DD2',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    },
);

Answer 1

您可以从 navigationOptions 获取导航道具。使用此代码：

navigationOptions: ({navigation}) => ({ 
    headerTitle: 'Create a Buzz',
                headerRight: () => (
                    <View style={styles.iconContainer}>
                        <TouchableOpacity onPress={()=> navigation.navigate('Setting')}> // error here
                            <Icon
                                style={{ margin: 10, fontSize: 18 }}
                                name='cog'
                                type='FontAwesome'
                                color='#ffff'
                            />
                        </TouchableOpacity>
                    </View>
                ),
    }),