Навигация при нажатии на изображение не работает

Question

Я пытался иметь возможность менять экраны, нажимая на изображение в коде, но оно не работает.

Я пытался определить Push, перемещаться и другие реквизиты, но это всегда говоритчто undefined не является объектом и показывает опору.

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',
  }
})

Answer 1

Поскольку Additional отсутствует в списке createStackNavigator экранов.Итак, this.props.navigation - это undefined.Чтобы покрыть это, сначала вам нужно export default AppNavigator, а в другом компоненте (например, Additional) вы должны использовать метод withNavigation.

В корневом компоненте:

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)

Answer 2

Родитель:

я

mport React from 'react';
import {AppRegistry, StyleSheet, View, Image, TouchableHighlight} from "react-native" ;
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import Additional from './Additional'
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json
import Screen from './Screen'

export default class SideBar extends React.Component {
    render() {
        return(

        <View style={styles.container}>



        <Additional navigation={this.props.navigation} />


                 </View>
        ) 
    }
}


const AppNavigator = createStackNavigator({
Home: {
    screen: Map,
  },
  Screen: {
    screen: Screen,
  },
}, {

});


const styles= StyleSheet.create({
    container:{ 
         flex: 1,
        backgroundColor: 'rgba(255, 255, 255, 0.81)',
       left: wp('75%'),
        width: 100,


}})

Grandparent:

import React, {Component} from 'react';
import {AppRegistry, Platform, StyleSheet, Text, View, Dimensions} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import MenuButton from './MenuButton'
import SideBar from './SideBar'





const {width, height} = Dimensions.get ('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = height / width
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
export default class App extends Component {

constructor (props) {
super(props)
this.state ={
  initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0

  },
  markerPosition: {
    latitude: 0,
    longitude: 0
  }
}
  }

watchID: ?number = null

componentDidMount(){

  navigator.geolocation.getCurrentPosition ((position) =>{
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)

var initialRegion = {

latitude : lat,
longitude: long,
latitudeDelta : LATITUDE_DELTA,
longitudeDelta : LONGITUDE_DELTA

}
this.setState({initialPosition: initialRegion})
this.setState({markerPosition: initialRegion})
  },
 (error) => alert (JSON.stringify(error)),
 {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000})

 this.watchID = navigator.geolocation.watchPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)

var lastRegion = {
  latitude: lat,
longitude: long,
latitudeDelta : LATITUDE_DELTA,
longitudeDelta : LONGITUDE_DELTA
}
this.setState({initialPosition: lastRegion})
this.setState({markerPosition: lastRegion})

}

 )}


componentWillUnmount(){
   navigator.geolocation.clearWatch(this.watchID)
 }



render() {
    return (
        <View style = {styles.container}>

      <MapView
       customMapStyle={mapStyle}
        style={styles.map}
        region={this.state.initialPosition}>


      <MapView.Marker
     coordinate= {this.state.markerPosition}>
     <View style = {styles.radius}>
       <View style = {styles.marker}>

       </View>
        </View>
     </MapView.Marker>
      </ MapView>
      <SideBar navigation= {this.props.navigation}/>
      <View style={styles.Mstyle}>
<MenuButton navigation= {this.props.navigation}/>
      </View>


</View>
    )

  }
}


const styles = StyleSheet.create({

 radius: {
height: 50,
width: 50,
borderRadius: 50/2,
overflow: 'hidden',
backgroundColor: 'rgba(0, 122, 255, 0.1)',
borderWidth: 1,
borderColor: 'rgba(0, 122, 255, 0.3)',
alignItems: 'center',
justifyContent: 'center'
  },
marker: {

 height: 20,
 width: 20,
 borderWidth: 3,
 borderColor: 'white',
 borderRadius: 20 / 2,
overflow: 'hidden',
backgroundColor: '#007AFF'
},


 Mstyle: {
      alignSelf:'center',
      position: 'absolute'
},

 container: {
  flex: 1,
  justifyContent: 'center',

  backgroundColor: '#F5FCFF'

 },
 map: {
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  position: 'absolute'
 },

});


 AppRegistry.registerComponent('mapsTutorial', ()=> mapsTutorial);