标题图标导航在反应导航(反应本机)上不起作用

Question

My React Native 应用程序由一个嵌套在 StackNavigator 内的 TabNavigator 组成，StackNavigator 是应用程序路由的入口点。

在 StackNavigator 中，我还有一个关于屏幕，我希望在单击标题中的图标时显示该屏幕。TabNavigator 按预期工作，但单击该图标不会执行任何操作，也不会产生任何错误。有人知道我错过了什么吗？

这是代码：

import { Icon } from 'native-base';
import React, { Component } from 'react';
import { createTabNavigator, createStackNavigator } from 'react-navigation';
import { View } from 'react-native';
import HomeTab from './tabs/HomeTab';
import HistoryTab from './tabs/HistoryTab';
import AboutScreen from './AboutScreen';
export default class Main extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Find Phone Country',
headerStyle: {
backgroundColor: '#C62828'
},
headerMode: 'screen',
headerTintColor: '#FFFFFF',
headerTitleStyle: {
fontWeight: 'bold',
justifyContent: 'space-between',
alignSelf: 'center',
textAlign: 'center',
flex: 1,
flexGrow: 1
},
headerRight: (
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
onPress={() => navigation.navigate('About')}
/>
),
headerLeft: <View />
};
};
render() {
return <RootStack />;
}
}
const MainTabNavigator = createTabNavigator(
{
Home: {
screen: HomeTab
},
History: {
screen: HistoryTab
}
},
{
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true,
showLabel: true,
upperCaseLabel: false,
allowFontScaling: true,
indicatorStyle: {
opacity: 0
},
style: {
backgroundColor: '#C62828'
},
activeTintColor: '#ffffff',
inactiveTintColor: '#e0e0e0'
}
}
);
const RootStack = createStackNavigator({
Main: {
screen: MainTabNavigator,
navigationOptions: () => ({
title: 'Main',
headerBackTitle: null,
header: null
})
},
About: {
screen: AboutScreen,
navigationOptions: () => ({
title: 'About',
headerBackTitle: 'Back'
})
}
});

谢谢

Answer 1

来自 native-base 的图标没有名为 onPress 的道具。尝试将图标封装在适当的组件中以捕获触摸，例如：

headerRight: (
<TouchableWithoutFeedback onPress={() => navigation.navigate('About')}> 
<Icon
name="ios-help-circle-outline"
style={{ paddingRight: 16, color: 'white' }}
/>
</TouchableWithoutFeedback>
),

不要忘记，在您的进口中：

import { View, TouchableWithoutFeedback } from 'react-native';