我在标签导航器的顶部设计了带图标的标题，该标题将带我到屏幕。但是我在媒体上出现错误，无法访问道具，并收到错误消息，说明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：导航到通知屏幕
答案 0 :(得分：0)
您只需要将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>
),