React Native Navigation аварийно завершает работу при запуске startTabBasedApp - PullRequest
Новая
       26

React Native Navigation аварийно завершает работу при запуске startTabBasedApp

3 голосов
/ 18 марта 2019

После того, как я добавил React Native Navigation в свое приложение, он начал падать. Просто внезапно происходит сбой моего приложения, когда я перемещаюсь по нему в startTabBasedApp. Я думаю, что это из-за componentDidMount и React Native Navigation.

Вот мои коды.

App.js 

 import {Navigation} from 'react-native-navigation';

//Screens
import AuthScreen from './src/screens/Auth/Auth';
import HomeScreen from './src/screens/Home/Home';
import EventCreator from './src/screens/EventCreator/EventCreator';
import EventMap from './src/screens/EventMap/EventMap';

//Register Screens
Navigation.registerComponent("AuthScreen", () => AuthScreen);
Navigation.registerComponent("HomeScreen", () => HomeScreen);
Navigation.registerComponent("EventCreator", () => EventCreator);
Navigation.registerComponent("EventMap", () => EventMap);


//Start an App
Navigation.startSingleScreenApp({
  screen: {
    screen: "AuthScreen",
    title: "Login"
  }
})

Auth.js

Это коды AuthScreen (где запускается приложение) 

import {View, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';

//Component 
import startMainTabs from '../MainTabs/MainTabs';

class AuthScreen extends Component {
  loginHandler = () => {
    startMainTabs();
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress={this.loginHandler}>
          <Text>
            Login
          </Text>
        </TouchableOpacity>
        <Text>
          Auth AuthScreen
        </Text>
      </View>
    );
  };
}

Затем, когда я нажимаю кнопку входа в систему или TouchableOpacity, он переходит в startMainTabs, который представляет собой 3 вкладки. 1-й экран или вкладка будет отображать MapComponent, где приложение будет аварийно завершать работу, но если я снова открою приложение во второй раз, приложение не будет аварийно завершаться сейчас, потому что я считаю, что причиной сбоя является Разрешение местоположения пользователя или что-то componentDidMount. Чтобы быть более понятным, если я изменю 1-й экран или вкладку, что нужно визуализировать первым, например, Home.js, где компонентом является только View и Text, он не будет падать.

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() {
navigator.geolocation.getCurrentPosition(position => {
  var lat = parseFloat(position.coords.latitude)
  var long = parseFloat(position.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})
});
 };

  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: false
  };
});
};

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>
    <TouchableOpacity 
      style={styles.iconContainer}
      onPress={this.getLocationHandler}
    >
      <Icon name="md-locate" size={35}/>
    </TouchableOpacity>
    <Button/>
    <MapView 
      style={styles.map}
      initialRegion={this.state.focusedLocation}
      onPress={this.pickLocationHandler}
      showsUserLocation={true}
      mapType='terrain'
      ref={ref => this.map = ref} //For animating map movement
    >
      {marker}
    </MapView>
  </View>
);
}
}

1 Ответ

0 голосов
/ 18 марта 2019

Я никогда не использовал эту библиотеку. Я использовал «реакция-навигация" . Вы можете попробовать это. Надеюсь, вам не придется сталкиваться с этой проблемой!

...