Попытка нажать на изображение, чтобы перейти к другому экрану, но при нажатии нет навигации - PullRequest
Новая
       89

Попытка нажать на изображение, чтобы перейти к другому экрану, но при нажатии нет навигации

0 голосов
/ 10 мая 2019

Я некоторое время пытался щелкнуть по изображению, чтобы перейти на другой экран, и ничего не получалось даже после нескольких публикаций.

После нескольких попыток с ошибками и пробами я закончил работу с этими структурами, где экран работает, но по щелчку все, что я вижу, это эффект touchableOpacity, но без навигации. Может ли кто-нибудь помочь, пожалуйста, это будет по достоинству оценено в этот момент. Спасибо

Значок класса с onPress: 

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 { createAppContainer, createStackNavigator, StackActions, NavigationActions, navigateToScreen } from 'react-navigation'; // Version can be specified in package.json
import AddScreen from './AddScreen'


class AddIcon extends React.Component {
    render() {

        return(

        <View style={styles.container}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('AddScreen')}
    >



        <Image  style={{ tintColor: "#9B9B9B", height: 56, width:56,
        position: 'absolute', alignSelf: 'center', top: wp('-84.0%'), left: wp('5%'),}}
          source={require("../Icons/addButton.png")} 

       // To be replaced by sketched icon or to pay flatIcon
           />

          </TouchableOpacity>
                 </View>
        ) 
    }
}




const Stack = createStackNavigator(
  {
   Map: Map,
    AddScreen: AddScreen,
  },
  {
    initialRouteName: 'Map',
  }
);

const styles= StyleSheet.create({
    container:{ 
        flex: 1,

        justifyContent: 'center',



}})
const AppContainer = createAppContainer(AddIcon);

export default AppContainer

Прямоугольник родительской стороны с AddIcon внутри: 

import 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 AddDocIcon from './AddDocIcon'


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

        <View style={styles.container}>



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


                 </View>
        ) 
    }
}



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'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import { createAppContainer, createStackNavigator, StackActions, NavigationActions, navigateToScreen } from 'react-navigation'; // Version can be specified in package.json
import AddDocScreen from './AddDocScreen'




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 Map 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>
    )

  }
}

const Stack = createStackNavigator(
  {
   Map: Map,
    AddDocScreen: AddDocScreen,
  },
  {
    initialRouteName: 'Map',
  }
);


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




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

  backgroundColor: '#F5FCFF'

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

});


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