单击图像不起作用时导航 [英] Navigate when clicking on image doesn't work

问题描述

我一直试图通过单击代码内的图像来更改屏幕，但是它不起作用.

I've been trying to be able to change screens by clicking on the Image within the code but it isn't working.

我曾尝试定义推"，导航"和其他道具，但总是说未定义不是对象，而是展示道具.

I've tried defining Push, navigate and other props but it always says that undefined is not an object and show the prop.

import React from 'react';
import { AppRegistry, StyleSheet, View, Image, TouchableOpacity, Button } from "react-native";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen'
import { StackNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Screen from './Screen'

export default class Additional extends React.Component {
  render(){
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() =>
          navigate("Screen")}
        >
          <Image
            style={{
              tintColor: "#9B9B9B", height: 56, width: 56,
              position: 'absolute', alignSelf: 'center', top: wp('-84.0%'), left: wp('5%'),
            }}
            source={require("../Icons/XButton.png")}
          />
        </TouchableOpacity>
      </View>
    )
  }
}

const AppNavigator = createStackNavigator({
  Home: {screen: Home},
  Screen: {screen: Screen},
}, {
  initialRouteName: 'Home',
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  }
})

推荐答案

因为Additional不在createStackNavigator屏幕列表中.因此，this.props.navigation是undefined. 为了解决这个问题，首先，您必须export default AppNavigator，并且在另一个组件(例如Additional)中，您必须使用withNavigation方法.

Because Additional is not in createStackNavigator screens list. So, this.props.navigation is undefined. To cover this, first, you have to export default AppNavigator , and in another component (for example Additional) you must use withNavigation method.

在根组件中:

export default createStackNavigator({
  Home: {screen: Home},
  Screen: {screen: Screen},
}, {
  initialRouteName: 'Home',
});

在其他组件中:

import {withNavigation} from 'react-navigation'

class Additional extends React.Component {
  // ...
}

export default withNavigation(Additional)

这篇关于单击图像不起作用时导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！