无法访问反应导航中的道具

Question

我在标签导航器上设计了一个标题，带有一个图标，可以将我引导到一个屏幕。但我在媒体上收到错误，无法访问道具并收到错误说明undefined is not an object(evaluating '_this.props.navigation')

我已经尝试通过导航道具并尝试使用withNavigation of react navigation

const SessionTabNavigator= createMaterialTopTabNavigator(
  {
    AllSessionList: { 
      screen: AllSessionListScreen,
      navigationOptions: {
        tabBarLabel: ({ tintColor,focused }) =>
            <Text style={{color: tintColor, fontSize: 12, fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub SemiBold", 
              fontWeight:Platform.OS == 'ios' ? "bold" : "normal", fontStyle: Platform.OS == 'ios' ? "normal" : "normal"}}>All Session List</Text>
        } 
    },
    MySessionList: { 
      screen: MySessionListScreen,
      navigationOptions: {
        tabBarLabel: ({ tintColor,focused }) =>
            <Text style={{color: tintColor, fontSize: 12, fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub SemiBold", 
              fontWeight:Platform.OS == 'ios' ? "bold" : "normal", fontStyle: Platform.OS == 'ios' ? "normal" : "normal"}}>My Session List</Text>
        }
      },
  },
  {
    headerMode: "none",
    navigationOptions: {
      headerVisible: false
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'top',

    tabBarOptions: {
      style: { elevation: 0,shadowColor: 'transparent',backgroundColor: '#E8E8E8' },
      showIcon: false,
      tabStyle: {

      height: 60,
      paddingVertical: 8,
      },
      iconStyle: {
        flexGrow: 0,
      marginBottom: 0,
      marginTop: 0
       },
       labelStyle: { justifyContent: 'center', alignItems: 'center',fontSize: 12 },
      indicatorStyle: { height: null, top: 0, backgroundColor: '#E8E8E8' },
      activeTintColor: '#cc0000',
      inactiveTintColor: '#808080',
    },
    lazy: true,
    animationEnabled: false,
    swipeEnabled: false,
  },
  {

    // initialRouteName:  'MySessionList',
  }

);


const sessionNavigator = createStackNavigator(
  {
    SessionHome: {
      screen: SessionTabNavigator,

      navigationOptions: {

      title: 'Session',
      headerStyle: {
        backgroundColor: '#cc0000'
      },
      headerRight: (
      <TouchableOpacity activeOpacity={0.8} onPress={()=>this.props.navigation.navigate('Notification')}style={{ marginHorizontal:15}}>
        <Icon family= 'Ionicons' name='ios-notifications'  size={25} color= "#FFFFFF"   />
      </TouchableOpacity>
    ),
      headerLeft: (
      <View style={{ marginHorizontal:15}}>
      </View>
    ),

      headerTintColor: '#FFFFFF',
      headerTitleStyle: {
        fontSize:25,
        fontFamily: Platform.OS == 'ios' ? "Sansation" : "Sansation Bold", 
        fontWeight:Platform.OS == 'ios' ? "bold" : "normal",
        flex: 1,
        alignSelf: 'center',
        textAlign: 'center',
       backgroundColor:'transparent',
      },
    },

    },



  },

);

sessionNavigator.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};




const Tabscreen = createMaterialTopTabNavigator(
  {
    Session: {
      screen: sessionNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused,tintColor }) =>
          focused ? (
            <Icon name="slideshare" family = 'FontAwesome' size={24} color={tintColor} />
          ) : (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <Icon name="slideshare" family = 'FontAwesome' size={26} color={tintColor} />
            </View>
          ),
          tabBarLabel: ({ tintColor,focused }) =>
          focused  ? (
            <Text style={{color: tintColor, fontSize: 10, fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", 
              fontWeight:Platform.OS == 'ios' ? "bold" : "normal", fontStyle: Platform.OS == 'ios' ? "italic" : "normal"}}>Session</Text>
          ) : null
          ,
      }
    },
    Chat: {
      screen: chatNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused,tintColor }) =>
          focused ? (
            <Icon name="chat" family = 'Entypo' size={24} color={tintColor} />
          ) : (
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <Icon name="chat" family = 'Entypo' size={26} color={tintColor} />
            </View>
          ),
          tabBarLabel: ({ tintColor,focused }) =>
          focused  ? (
            <Text style={{color: tintColor, fontSize: 10, fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", 
              fontWeight:Platform.OS == 'ios' ? "bold" : "normal", fontStyle: Platform.OS == 'ios' ? "italic" : "normal"}}>Chat</Text>
          ) : null
          ,
      }
    },
    Profile: {
      screen: profileNavigator,
      navigationOptions: {
        tabBarIcon: ({ focused,tintColor }) =>
          focused ? (
            <Icon name="person" size={24} color={tintColor} />
          ) : (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <Icon name="person" size={26} color={tintColor} />
            </View>
          ),
          tabBarLabel: ({ tintColor,focused }) =>
          focused  ? (
            <Text style={{color: tintColor, fontSize: 10, fontFamily: Platform.OS == 'ios' ? "Krub" : "Krub Medium Italic", 
              fontWeight:Platform.OS == 'ios' ? "bold" : "normal", fontStyle: Platform.OS == 'ios' ? "italic" : "normal"}}>Profile</Text>
          ) : null
          ,
      }
    }
  },
  {
    // lazy: true


    initialRouteName: "Session",
    tabBarComponent: TabBarTop,
    tabBarPosition: "bottom",
    tabBarOptions: {
      style: {
        backgroundColor: "#808080"
      },
      upperCaseLabel: false,
      labelStyle: {
        margin:0
      },
      showLabel: true,
      showIcon: true,
      tabStyle: {
        height: 60
      },
      iconStyle: {
        flexGrow: 0,
        marginBottom: 5
      },
      indicatorStyle: {
        backgroundColor: "#cc0000",
        height: null,
        top: 0
      },
      activeTintColor: "#FFFFFF",
      inactiveTintColor: "#D9D9D9"
    },
    animationEnabled: true,
    swipeEnabled: false
  }
);

const AppNavigator = createSwitchNavigator(
  {

     LoginCheck: {
      screen: LoginCheckScreen
    },

     Notification: {
      screen: NotificationScreen
    },

    Signup: {
      screen: SignupScreen
    },

    Login: {
      screen: LoginScreen
    },
    Tabscreen: {
      screen: Tabscreen
    }
  },
  {
    initialRouteName: "LoginCheck",
    headerMode: "none",
    navigationOptions: {
      headerVisible: false
    }
  }
);


export default createAppContainer(AppNavigator)

ActualResult：获取一个错误说明undefined is not an object(evaluating '_this.props.navigation')

ExpectedResult：导航到通知屏幕

Answer 1

你只需要将prop传递给屏幕配置，

navigationOptions: prop => ({ // prop is passed here
      title: 'Session',
      headerStyle: {
      ...
      headerRight: ( // below line use prop.navigation instead of this.props.navigation
      <TouchableOpacity activeOpacity={0.8} onPress={()=>prop.navigation.navigate('Notification')}style={{ marginHorizontal:15}}>
        <Icon family= 'Ionicons' name='ios-notifications'  size={25} color= "#FFFFFF"   />
      </TouchableOpacity>
    ),