Question

下面的代码是我的主要导航。我在Buzz的标题中制作了一个图标，我想在onPress中调用设置屏幕，但是我不知道如何在主导航器中调用该屏幕。我的所有其他屏幕都可以通过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

您可以从navigationOprions获取导航道具...使用此代码

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>
                ),
    }),

如何在堆栈导航中浏览屏幕

1 个答案: