Question

我正在创建一个名为HomeIcon的组件，并通过header> defaultNavigationOptions将其插入我的headerRight中，我通过分配以下内容在该组件中添加了onPress this.props.navigation.navigate('Main');的目的是单击此组件会加载MainScreen，但是当我单击该标题时，会发生上述标题中的错误。这是代码：

import React from 'react';
import { StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';

export default class HomeIcon extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => {
        this.props.navigation.navigate('Main');
      }}>
        <Image style={styles.buttonHome} source={require('../icons/home2.png')} />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  buttonHome: {
    aspectRatio: 1,
    resizeMode: 'contain',
    height: Dimensions.get('window').width * 0.08,
    width: Dimensions.get('window').height * 0.08,
    margin: Dimensions.get('window').height * 0.018
    }
});

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Main from './source/screens/MainScreen';
import CustomCards from './source/screens/CustomCardsScreen';
import HomeIcon from './source/components/HomeIcon';

const AppNavigator = createStackNavigator ({
  'Main': {
    screen: Main,
    navigationOptions: {
      title: 'Tela Principal'
    }
  },
  'CustomCards': {
    screen: CustomCards,
    navigationOptions: {
      title: 'Cartões Personalizados'
    }
  }
}, {
  defaultNavigationOptions: {
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    headerLeft: (null),
    headerRight: (
      <HomeIcon />
    ),
    headerStyle:{
      backgroundColor: '#7d253b'
    },
    headerTintColor: '#FFF'
  }
});

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "@types/react": "^16.8.13",
    "@types/react-native": "^0.57.43",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

有关更多详细信息，请访问GitHub中的项目存储库：https://github.com/Alex-Xavier/ACTIFICA

Answer 1

您需要将导航对象传递给该组件。 “ this.props.navigation”仅在直接分配给堆栈/标签/抽屉导航的屏幕中可用。在您的情况下，其屏幕为“主”和“自定义卡”

HomeIcon组件不知道什么是this.props.navigation。

您必须通过“导航”作为道具。像这样：

 headerRight: ({ navigation }) => <HomeIcon  navigation={navigation}/>

然后在HomeIcon中将其作为this.props.navigation提供。

Answer 2

defaultNavigationOptions = ({ navigation }) => ({
    headerTitleStyle: {
      flexGrow: 1,
      fontWeight: 'bold',
      textAlign: 'center',
    },
    headerLeft: (null),
    headerRight: (
       <HomeIcon navigation={navigation} />
       ),
    headerStyle: {
      backgroundColor: '#7d253b',
    },
      headerTintColor: '#FFF',
   });

未捕获的错误：未定义不是对象（正在评估't.props.navigation.navigate'）touchableHandlePress @ [本地代码]

2 个答案: