Question

我在Android上使用React Native上的Google地图时出现问题，但在IOS上一切都很好!!!有人可以帮忙吗

Answer 1

从'react'导入React; import { AppRegistry，文本，视图，样式表图片，警报，按钮， TouchableHighlight， AsyncStorage，来自'react-native';

                    import Router from '../main';

                    import Expo from 'expo';
                    import FontAwesome, { Icons } from 'react-native-fontawesome';

                      import {
                        createRouter,
                        NavigationProvider,
                        StackNavigation,
                      } from '@expo/ex-navigation';

                    import MapView from 'react-native-maps';
                    import WebView from 'react-native-maps';
                    var Item = require('./languages/dictionary.json');

                    export default class Maps extends React.Component {
                        static route = {

                          navigationBar: {
                          title: function(params) {
                              if (typeof params.language === 'undefined') {
                                return '';
                              }
                              return Item[params.language].maps;
                            }
                          }
                        }

                    constructor(props) {
                        super(props);

                        this.state = {
                          data:[{
                            id:"",
                            name:"",
                            address:"",
                            lat:"",
                            lng:""
                          }],

                        settings:[{
                            ImageFolder:"",
                            TimeToUpdate:""
                          }],    

                          language:0,
                          latitude: null,
                          longitude: null,
                          latitudeDelta:0.0000467769713,
                          longitudeDelta:0.0421,
                          error: null,
                          //version:null,

                        };
                      }


                    componentDidMount() {

                        AsyncStorage.getItem("version").then((value)=>{
                          this.setState({"version":value})

                        }).done();

                        AsyncStorage.getItem("radius").then((value)=>{
                          this.setState({"radius":value})

                        }).done();

                        AsyncStorage.getItem("language").then((value)=>{
                          this.setState({"language":value})

                        }).done();

                        AsyncStorage.getItem("language").then((value)=>{
                          //this.setState({"language":value})
                          this.setState({language: value})
                          //console.warn(this.state.language)
                          this.props.navigator.updateCurrentRouteParams({language: value});
                        }).done();

                        navigator.geolocation.getCurrentPosition(
                          (position) => {
                            this.setState({
                              latitude: position.coords.latitude,
                              longitude: position.coords.longitude,
                              latitudeDelta:0.0000467769713,
                              longitudeDelta:0.0421,
                              error: null,
                            });


                          //Alert.alert("https://api.parkingwatcher.com/"+this.state.version+"/parkings.php?lat="+this.state.latitude+"&lng="+this.state.longitude+"&radius="+this.state.radius)
                          fetch("https://api.parkingwatcher.com/"+this.state.version+"/parkings.php?lat="+this.state.latitude+"&lng="+this.state.longitude+"&radius="+this.state.radius)
                          .then((response) => response.json())
                          .then((responseData) => {        
                            this.setState({data: responseData});

                          })
                          .done();

                          fetch("https://api.parkingwatcher.com/"+this.state.version+"/settings.php")
                          .then((response) => response.json())
                          .then((responseData) => {        
                            this.setState({settings: responseData});

                          })
                          .done();



                          },
                          (error) => this.setState({ error: error.message }),
                          { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
                        );


                      }

                    onPressAddFavourites(){
                      Alert.alert(
                      'Alert Title',
                      'My Alert Msg'
                    )
                    }


                      render() {
                        return (
                            <View style={styles.container}>
                            <MapView style={styles.map}
                                    showsScale
                                    showsPointsOfInterest                
                                    region={{
                                      latitude: parseFloat(this.state.latitude),
                                      longitude: parseFloat(this.state.longitude),
                                      latitudeDelta: parseFloat(this.state.latitudeDelta),
                                      longitudeDelta:parseFloat(this.state.longitudeDelta),
                                    }}   
                                >

                                {this.state.data.map(marker => {
                                  return(
                                    <MapView.Marker coordinate={{
                                        latitude: parseFloat(marker.lat),
                                        longitude: parseFloat(marker.lng), 
                                        }}
                                        >
                                      <MapView.Callout>
                                        <View>
                                          {/*<Image source={{uri: 'https://data.parkingwatcher.com/parkings/'+marker.id+'.jpg'}} style={{height: 200, width: 200}} />*/}
                                          <Image source={{uri: this.state.settings.ImageFolder + marker.id+'.jpg'}} style={{height: 200, width: 200}} />
                                          <Text style={styles.name}>{marker.name}</Text>
                                          <Text style={styles.address}>{marker.address} {this.state.language}</Text>

                                          {/*<Text>{this.state.radius} </Text>*/}
                                          {/*<Text>{this.state.settings.ImageFolder} </Text>*/}
                                              <Button
                                                onPress={this.onPressAddFavourites}
                                                title="Add to Favourites"
                                                color="#841584"
                                                accessibilityLabel="Add to Favourites"
                                              />
                                        </View>
                                      </MapView.Callout>
                                  </MapView.Marker>
                                  )
                                })}

                            </MapView>  

                        </View>


                        );
                      }
                    }

                    var styles = StyleSheet.create({

                      container: {
                        flex: 1,
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#F5FCFF',
                      },
                        map: {
                          position: 'absolute',
                          top: 0,
                          left: 0,
                          right: 0,
                          bottom: 0,
                        },
                        name:{
                          textAlign : 'center',
                        },
                        address:{
                          textAlign : 'center',
                        }
                    });

React Native MapView Expo在Android上不起作用

1 个答案: