React Native - How to use React Navigation with React Native Maps?

你说的曾经没有我的故事 提交于 2019-12-24 18:46:37

问题


I have a scene that show some monuments in my city. When I press a marker (monument) it shows the name of the monument. What I want to do is, when I press that name I want to transit to a determined scene (with react-navigation). I wrapped the name of monument with a TouchableHighlight and on press I call the 'navigate' method. But it simply dont transit, it does nothing. Not even an error.

Here is my code:

render(){
const { navigate } = this.props.navigation;
    const { data }  = this.props.navigation.state.params;

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

            <MapView
                style={styles.map}
                initialRegion={{
                    latitude: 39.604419,
                longitude: -8.411803,
                latitudeDelta: 0.0122,
                longitudeDelta: 0.0221,
                }}

            >
      {data.map(i => {
        if (i.category === "Museus"){
          return i.monuments.map((j, index) => (
                    <MapView.Marker
                        coordinate={{
                            latitude: j.latitude,
                            longitude: j.longitude,
                        }}

                        pinColor='#009688'
                        key={index}
                    >
              <MapView.Callout tooltip style={styles.callout}>
                <View style={styles.calloutContainer}>

                  <TouchableHighlight
                    onPress={() => navigate('MonumentoDetails')}
                    style={[styles.bubble, {backgroundColor:'#009688'}]}
                  >
                    <View>
                        <Text style={styles.name}>{j.name}</Text>
                    </View>
                  </TouchableHighlight>

                  <View style={[styles.arrow, {borderTopColor:'#009688'}]} />
                </View>
              </MapView.Callout>
            </MapView.Marker>
          ))
        }
      })}
            </MapView>
        </View>
    );
}

}

What am I doing wrong? Thanks!

来源:https://stackoverflow.com/questions/45338599/react-native-how-to-use-react-navigation-with-react-native-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!