[英]react native: react-navigation crashes when navigating with headerRight
[英]React Native Navigation crashes when navigating startTabBasedApp
在我將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>
);
};
}
然后當我按下Login按鈕或TouchableOpacity時,它將導航到startMainTabs,這是3個標簽。 第一個屏幕或選項卡將呈現應用程序將崩潰的MapComponent,但如果我第二次再次打開應用程序,應用程序將不會立即崩潰,因為我認為崩潰的原因是用戶位置的權限或某些關於componentDidMount。 為了更容易理解,如果我更改第一個屏幕或選項卡首先渲染的內容,例如Home.js,其中組件只是視圖和文本,它不會崩潰。
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>
);
}
}
我從未使用過這個庫。 我使用'react-navigation' 。 你可以試試。 希望你不必面對這個問題!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.