時々、状態の更新の前にほとんどの場合、適切な位置を取得できます。render()はヌル状態を取得します。場所+ mapview - レンダリングする前にComponentWillMountで解決されますか?リアクションネイティブ| Expo
私はasync + wait条件を追加しようとしましたが、役に立たないです。どのように私は場所のデータが州に設定されている地図がレンダリングされていることを確認することができます。
ここにコードがあります。
もう一度、次の場所にnexttick()などを配置して、更新された状態がレンダリングされるようにすることができますか?
import React, { Component } from "react";
import {Platform,Text,Image,View,StyleSheet,Dimensions} from "react-native";
import { MapView, Constants, Location, Permissions } from "expo";
const { width, height } = Dimensions.get("window");
const SCREEN_HEIGHT = height;
const SCREEN_WIDTH = width;
const ASPECT_RATIO = width/height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
export default class ComplaintScreen extends Component {
state = {
location: null,
errorMessage: null,
positionState: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0
},
markerPosition: {
latitude: 0,
longitude: 0
}
};
async componentWillMount() {
if (Platform.OS === "android" && !Constants.isDevice) {
this.setState({
errorMessage:
"Oops, this will not work on Sketch in an Android emulator. Try it on your device!"
});
} else {
await this._getLocationAsync();
}
}
_getLocationAsync = async() => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== "granted") {
this.setState({
errorMessage: "Permission to access location was denied"
});
}
let location = await Location.getCurrentPositionAsync(
{
enableHighAccuracy: true, timeout:5000, maxiumumAge: 10000
});
this.setState({ location });
var lat = parseFloat(location.coords.latitude);
var long = parseFloat(location.coords.longitude);
var region = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
};
this.setState({ positionState: region });
this.setState({ markerPosition: region });
};
render() {
return (
console.log(this.state.positionState),
<View style={Styles.container}>
<MapView style={Styles.map} initialRegion={this.state.positionState}>
<MapView.Marker coordinate={this.state.markerPosition}>
<View style={Styles.radius}>
<View style={Styles.marker} />
</View>
</MapView.Marker>
</MapView>
</View>
);
}
}
const Styles = StyleSheet.create({
{some styles were here removed to keep the post short}
});
あなたは 'this._getLocationAsync()を呼び出すことができない理由;' componentDidMountに? – Umesh
私はそれについて少し不明ですが、コンポーネントがレンダリングされた後に呼び出されることはありませんか? コンポーネントがレンダリングされた場合、この特定の関数は後で実行され、同じ結果が得られますか? –
'this.setState'の前に' await'を入れてみてください – Umesh