Question

我一直试图单击图像以导航到另一个屏幕，即使发布了几次也没有结果。

经过几次尝试和错误的尝试后，我完成了这些结构，这些结构中的屏幕可以正常工作，但是单击时只能看到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);

尝试单击图像导航到其他屏幕，但单击无导航

0 个答案: