Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@tnatsume00

react-nativeで現在地取得した時に、現在地を中心にしたい

More than 1 year has passed since last update.

はじめに

react-nativeで現在地取得アプリを作ることはできた。
しかし、ずれたところで、再度、現在位置を取得しても、現在地が中心に来ない

なんとかして、中心に現在地を表示させたい。

コード

App.js
import React,{Component}from 'react';
import {
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableOpacity,
  Image,
} from 'react-native';

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
// import { AssertionError } from 'assert';

const STATUS_BAR_HEIGHT = Platform.OS == 'ios' ? 20 : statusbar.currentHeight;

export default class App extends Component{
  constructor(props){
    super(props)
    this.state ={
      latitude:null,
      longitude:null,
      message:'位置情報取得中',
    }
  }
  componentDidMount(){
    this.getLocationAsync()
  }
  getLocationAsync = async() =>{
    console.log('現在位置取得中')
    const {status} = await Permissions.askAsync(Permissions.LOCATION)
    if(status !== 'granted'){
      this.setState({
        message:'位置情報のパーミッションの取得に失敗しました。'
      })
      return
    }
    const location = await Location.getCurrentPositionAsync({});
    this.setState({
      latitude:location.coords.latitude,
      longitude:location.coords.longitude,
    })

  }
  render(){
    if(this.state.latitude && this.state.longitude){
      return (
        <View style={styles.container}>
          <MapView
            style={{flex:1}}
            initialRegion={{
              latitude:this.state.latitude,
              longitude:this.state.longitude,
              latitudeDelta:0.002,
              longitudeDelta:0.002,
            }}
            showsUserLocation={true}
          />
          <TouchableOpacity onPress={this.getLocationAsync}style={styles.now}>
            {/* <Text>現在地取得</Text> */}
            <Image 
              resizeMode='contain'
              source={require(`./assets/location.png`)} 
              style={{width:20,height:20,transform: [{ rotate: '340deg' }], }}
              />
          </TouchableOpacity>

        </View>
      );
    }
    return (
      <View style={{flex:1,justifyContent:"center"}}>
        <Text>{this.state.message}</Text>

      </View>
      )

  }
}

const styles = StyleSheet.create({
  container:{
    paddingTop:STATUS_BAR_HEIGHT,
    flex:1,
    backgroundColor:'#fff',
    justifyContent:'center',
  },
  now:{
    position:'absolute',
    right:10,
    top:30,
  }
})

解決

App.js
import React,{Component}from 'react';
import {
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableOpacity,
  Image,
} from 'react-native';

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
// import { AssertionError } from 'assert';

const STATUS_BAR_HEIGHT = Platform.OS == 'ios' ? 20 : statusbar.currentHeight;

export default class App extends Component{
  constructor(props){
    super(props)
    this.state ={
      latitude:null,
      longitude:null,
      message:'位置情報取得中',
    }
  }
  componentDidMount(){
    this.getLocationAsync()
  }
  getLocationAsync = async() =>{
    console.log('現在位置取得中')
    const {status} = await Permissions.askAsync(Permissions.LOCATION)
    if(status !== 'granted'){
      this.setState({
        message:'位置情報のパーミッションの取得に失敗しました。'
      })
      return
    }
    const location = await Location.getCurrentPositionAsync({});
    this.setState({
      latitude:location.coords.latitude,
      longitude:location.coords.longitude,
    })

  }
  render(){
    if(this.state.latitude && this.state.longitude){
      return (
        <View style={styles.container}>
          <MapView
            style={{flex:1}}
            initialRegion={{
              latitude:this.state.latitude,
              longitude:this.state.longitude,
              latitudeDelta:0.002,
              longitudeDelta:0.002,
            }}
            region={{
              latitude:this.state.latitude,
              longitude:this.state.longitude,
              latitudeDelta:0.002,
              longitudeDelta:0.002,

            }}
            showsUserLocation={true}
          />
          <TouchableOpacity onPress={this.getLocationAsync}style={styles.now}>
            {/* <Text>現在地取得</Text> */}
            <Image 
              resizeMode='contain'
              source={require(`./assets/location.png`)} 
              style={{width:20,height:20,transform: [{ rotate: '340deg' }], }}
              />
          </TouchableOpacity>

        </View>
      );
    }
    return (
      <View style={{flex:1,justifyContent:"center"}}>
        <Text>{this.state.message}</Text>

      </View>
      )

  }
}

const styles = StyleSheet.create({
  container:{
    paddingTop:STATUS_BAR_HEIGHT,
    flex:1,
    backgroundColor:'#fff',
    justifyContent:'center',
  },
  now:{
    position:'absolute',
    right:10,
    top:30,
  }
})

追加したコード

MapViewの所に

region={{
  latitude:this.state.latitude,
  longitude:this.state.longitude,
  latitudeDelta:0.002,
  longitudeDelta:0.002,
}}

を加えたら、現在地取得するたびに、現在地を中心とした地図を表示することができた。
これで、解決。

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tnatsume00
都内のWeb制作会社でバックフロントエンジニアとして働いています。 現在、人づてに聞いたreactnative,expoにはまっていて、色々と触って、 その中での気づきなどを記事にしています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?