Question

我的React Native应用程序由一个TabNavigator组成，该TabNavigator嵌套在StackNavigator内，而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

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

GetLastError

不要忘了，在您的进口商品上：

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

标题图标导航无法用于反应导航（React Native）

1 个答案: