reactjs - 从标题的右键导航 - React Native

Question

我正在尝试从标题按钮导航，但我不能，因为找不到导航变量。

这是我的代码

export const createRootNavigator = (signedIn = false) => {

return StackNavigator(
  {
    SignedIn: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false,
        headerStyle,
        headerTintColor: "white",
        headerTitleStyle,
        headerLeft: null,
        headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
                        onPress={() => navigation.navigate({ routeName: 'Notification'})}>
                        <Icon
                          name="md-notifications-outline"
                          size={26}
                          style={{ color: "white" }}/>
                      </TouchableOpacity>,


      }
    },
    SignedOut: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    Notification: {
      screen: Notification,
      navigationOptions: {
        gesturesEnabled: false
      }
    }
  },
  {
    mode: "modal",
    initialRouteName: signedIn ? "SignedIn" : "SignedOut"
  }
);

};

我试图声明一个导航变量，但它不起作用

屏幕截图

主屏幕

错误画面

谢谢。

Answer 1

您需要将其添加到静态 navigationOptions 函数中，如下所示：

static navigationOptions = ({ navigation }) => {
  return {
    headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
                    onPress={() => navigation.navigate({ routeName: 'Notification'})}>
                    <Icon
                      name="md-notifications-outline"
                      size={26}
                      style={{ color: "white" }}/>
                  </TouchableOpacity>,
    ... and so on
  }
};

或者也许将您的顶线更改为：

export const createRootNavigator = (signedIn = false, { navigation }) => {

希望这可以帮助！

Answer 2

import {Button ,TouchableOpacity,Image} from 'react-native';

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';


const AppTabNavigator = createMaterialTopTabNavigator(
    {
        AlertDetails: AlertDetails,
        Comments: Comments,
    },
    {
        navigationOptions:{
          title:"Alert Details",
          headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
                          onPress={() => alert('Three Dot Icon') }>
                          <Image
                               style={{height: 20, width :30,marginTop:10 ,marginLeft:30,marginRight:10 , justifyContent: 'center'}}
                               resizeMode="contain"
                               source={require('../assets/icons/three_dot.png')}>
                          </Image>
                    </TouchableOpacity>,
          headerLeft: <Button   style={{ marginRight:40, paddingRight:40,}}  title=":" title=":" onPress={()=> alert('Left  button 2')}  />,
        },
        tabBarOptions: {
            activeTintColor: 'white',
            showIcon: false,
            showLabel:true,
            style: {
                backgroundColor: colorTheme,
//                borderTopWidth: 3,
//                borderTopColor:'#465456'
            },
            indicatorStyle: {
                backgroundColor: 'blue',
                height : 2,
            },
        },
    }
);