react native map polygons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
             <Polygon
                 onPress={()=>alert('tıklandı')}
                 strokeWidth={3}
                 strokeColor={"red"}
                 fillColor={"yellow"}
                 tappaple={true}
                 coordinates={[
               {latitude: 41.051873, longitude: 28.809529},
               {latitude: 41.050525, longitude: 28.809171},
               {latitude: 41.051896, longitude: 28.812212}
             ]} />
        </MapView>

react native maps marker basit işlemler

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
 
            region={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
            <Marker
                onPress={()=>alert("Marker Tıklandı")}
                onDrag={()=>alert("kaydırma")}
                onDragEnd={()=>alert("kaydırma bitti")}
                draggable={true}
                title={"212"}
                description={"AVM"}
                pinColor={"blue"}
                opacity={0.5}
                coordinate={{
              latitude: 41.0538538,
              longitude: 28.805605,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }} />
        </MapView>

react native google maps android ve iosda çalıştırma

ilk önce bir key alacaksınız google map android sdk ve ios sdk etkinleştirerek.

sonra AndroidManifest.xml dosyamıza

üst tarafa bu izinleri ekle.

1
2
<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

yine aynı dosyada alt taraflarda application içine;

1
2
3
4
<meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="AIzaSyA2lytwbh-gqmVYQFzxELeijogKAKYYJdI" />
      <uses-library android:name="org.apache.http.legacy" android:required="false" />

ios google maps çalıştırmak için ayarlar

ios->ProjeAdı->AppDelegate.m dosyasında “@implementation AppDelegate” üstüne

1
#import <GoogleMaps/GoogleMaps.h>

ekliyoruz. yine aynı dosyada “”- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions”” yazan başlangıç kısmının bitişinden hemen önce return yes var. onun üstüne;

1
[GMSServices provideAPIKey:@"APIKEY"];

ios->Podfile dosyasını açıyoruz. ilk “Target xx Do” altına hemen;

1
2
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

bu target bitmeden hemen önce

1
2
3
4
pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'

bak buradan bakabilirsiniz.
https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

örnek app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity,
    PermissionsAndroid,
    Platform
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import NativePermissionsAndroid from "react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount = async () =>{
 
    if(Platform.OS == 'android'){
      const response = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
         'title':'MapsAndGeo',
         'message':"Konumunuzu istiyoruzzz"
      })
 
    }else{
      Geolocation.requestAuthorization();
    }
 
    
 
  render(){
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

react native google maps kurulumu

1
2
3
4
npm install react-native-maps --save-exact
cd ios
pod install
cd ..

bunları sırayla uyguluyoruz.

örnek kullanımı;

1
import MapView from 'react-native-maps';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  render(){
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
 
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

bu basit hali ve ekranda gözüken ilk hali tabi. ayarlarımızı yapmamız lazım.

React Native Harita İzleme Özelliği Durdurma Yöntemleri

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount() {
      Geolocation.requestAuthorization();
      this.watchID = Geolocation.watchPosition(
          position => {
            const { coords:{latitude,longitude}} = position;
            this.setState( {latitude,longitude})
          },
          error => {
 
          }
      )
 
 
       // bu da farklı bir izlemeyi durdurma seçeneği
 
  }
 
  componentWillMount() {
    Geolocation.clearWatch(this.watchID) // farklı bir sayfaya geçtiğimizde izleme durdurulacak
  }
 
  _stop = () => {
    Geolocation.stopObserving()
  }
 
  render(){
    return <SafeAreaView>
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
      <TouchableOpacity onPress={this._stop}>
        <Text>Durdur</Text>
      </TouchableOpacity>
      </View>
    </SafeAreaView>
  }
}

React Native Geolocation Konum İzleme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
 
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount() {
      Geolocation.requestAuthorization();
      Geolocation.watchPosition(
          position => {
            const { coords:{latitude,longitude}} = position;
            this.setState( {latitude,longitude})
          },
          error => {
 
          }
      )
  }
 
  render(){
    return <SafeAreaView>
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
 
      </View>
    </SafeAreaView>
  }
}

React Native Geolocation Koordinatları Ekrana Basma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
 
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount() {
      Geolocation.requestAuthorization();
      Geolocation.getCurrentPosition(
          position => {
            const { coords:{latitude,longitude}} = position;
            this.setState( {latitude,longitude})
          },
          error => {
            console.log(error)
          }
      );
  }
 
  render(){
    return <SafeAreaView>
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
 
      </View>
    </SafeAreaView>
  }
}

React Native Geolocation Kurulumu ve İzin İsteme

1
2
3
4
npm install @react-native-community/geolocation --save
cd ios
pod install
cd ...

bunları sırayla yazıyoruz. daha sonra izin istemek için;

Android için;
– android->app->src->main->AndroidManifest.xml dosyasına

1
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

bunu bir önceki uses permission kodunun altına yapıştırın geçin.

ios için;

ilk önce xcode ile projeyi aç. proje açıldıktan sonra sol menüde uygulama ismi ve pods yer alıyor. uygulama ismine tıkla. ekranda bir ekran açılacak. orada infoya tıklıyoruz. Herhangi bir izinin yanında + işaretine basıyoruz. İzin ismine Privacy – Location When In use usage Description’u seçip value kısmına “Konumuzu almak istiyoruz” yazınız.

Yine bir tane daha + tuşuna basınız. “Privacy – Location Always Usage Description” kısmını seçip value değerine yukarıdakinin aynısını yazıyoruz.

Yine bir tane daha + tuşuna basınız. “Privacy – Location Always and When In Use Usage Description” kısmını seçip value değerine yukarıdakinin aynısını yazıyoruz.

React Mobx Her sayfada Mobx Çağırmayı önleme

Merhabalar

100 tane sayfamız var ve hepsinde mobx kullanmak istiyoruz. Tek tek import mu edeceğiz hayır.

geliyoruz App.js(ana giriş dosyamıza)

1
2
3
import { observable } from "mobx";
import MainStore from "./src/Store/MainStore";
import {Provider} from "mobx-react";

Sizde MainStore farklı bir isim olabilir o size kalmış. İsterseniz 10 tane farklı kullanın.

Sonra ana js dosyanızda rendera geliyorsun

1
2
3
render(){
    return <Provider MainStore={MainStore}><Route/></Provider>
  }

kullanacağımız yere geliyoruz vev ilk önce import ediyoruz

1
2
import { inject, observer } from "mobx-react";
@inject('MainStore') // varsa başka bişi virgül ile ayır

kullanmak istediğimiz yere gelip;

1
this.props.MainStore.name

başına this props eklemen yeterli.

React Mobx Verisini Değiştirme ve Anlık Yansıtma

merhabalar

bir textimiz var. İçine ali yazıyor. altına bir butona koyduk ve bunu veli yaptırmak istedik mobx ile.

Yine bir tane MainStore.js oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { observable, action, makeObservable } from "mobx";
 
class MainStore{
  @observable name = 'ali desidero';
 
  constructor() {
      makeObservable(this)
  }
 
  @action setName(name){
    this.name = name;
  }
 
  
}
 
export default new MainStore();

sonra ilgili text ve butonumuzun olduğu sayfaya ilk önce importlarımızı yapıyoruz.

1
2
3
4
import { observable } from "mobx";
import { observer } from "mobx-react";
import MainStore from "../../Store/MainStore";
@observer

text ve butonumuz

1
2
3
4
<Text>{MainStore.name}</Text>
                    <TouchableOpacity onPress={()=> MainStore.setName("AliVeli")}>
                      <Text>Değiştir</Text>
                    </TouchableOpacity>