Блог

Когда я перемещаюсь по своему приложению в startTabBasedApp (мои 3 вкладки), первый экран для рендеринга — это EventMap.js вот где происходит сбой моего приложения. Я просто не знаю, почему это сбой, я пытался вставить console.log во все части своих кодов, но ошибка не появилась.

Итак, основная проблема здесь заключается в EventMap.js , потому что, когда я попытался удалить EventMap.js в моем startTabBasedApp (основные вкладки) затем удалите приложение, запустите react-native run-android , откройте приложение, перейдите по вкладкам (2), оно работает нормально.

Что я пытаюсь сделать в своем приложении, так это когда пользователь открывает его и переходит к EventMap.js Я хочу мгновенно получать местоположение пользователя, как в приложении Grab.

Как я могу добиться этого без сбоя приложения?

Вот мои коды для EventMap.js

 class EventMap extends Component {
constructor(props) {
  super(props);

this.state = {
  focusedLocation: {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.01,
    longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height * 0.01
  },
  locationChosen: false,
  markerPosition: {
    latitude: 0,
    longitude: 0
  }
 }
}

componentDidMount() {
  this.didMountGetUserLocation();
};

//This is getting the location and exactly/automatically when they open
didMountGetUserLocation = () => {
  navigator.geolocation.getCurrentPosition(pos => {
    var lat = parseFloat(pos.coords.latitude)
    var long = parseFloat(pos.coords.longitude)

    var initialRegion = {
      latitude: lat,
      longitude: long,
      latitudeDelta: 0.01,
      longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height *0.01
    };

    this.setState({focusedLocation: initialRegion})
    this.setState({locationChosen: true})
    this.setState({markerPosition: initialRegion})
  },
  err => {
    console.log(err);
  });
};

pickLocationHandler = (event) => {
  const coords = event.nativeEvent.coordinate;
  //For animation of map
  this.map.animateToRegion({
    ...this.state.focusedLocation,
    latitude: coords.latitude,
    longitude: coords.longitude
  });
  this.setState(prevState => {
    return {
      focusedLocation: {
        ...prevState.focusedLocation,
        latitude: coords.latitude,
        longitude: coords.longitude
      },
      locationChosen: true
    };
  });
};

getLocationHandler = () => {
  navigator.geolocation.getCurrentPosition(pos => {
    const coordsEvent = {
      nativeEvent: {
        coordinate: {
          latitude: pos.coords.latitude,
          longitude: pos.coords.longitude
        }
      }
    };
    this.pickLocationHandler(coordsEvent);
  },
  err => {
    console.log(err);
    alert("Fetching failed");
  })
};

render() {
  let marker = null;
  if(this.state.locationChosen) {
    marker = <MapView.Marker coordinate={this.state.markerPosition}/>
  }
  return(
    <View style={{zIndex: -1}}>
     <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
        <Icon name="md-locate" size={30} color="blue"/>
      </TouchableOpacity>
      <MapView
        style={styles.map}
        initialRegion={this.state.focusedLocation}
        onPress={this.pickLocationHandler}
        showsUserLocation={true}
        ref={ref => this.map = ref} //For animating map movement
      >
        {marker}
      </MapView>
    </View>
  );
}
}