Kategori: react

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>

react Mobx ilk kullanımı

src içine bir Store diye klasör oluşturduk. İçine MainStore.js dosyası oluşturduk. İçine;

iki türlü çağırabiliyoruz. biri fonksiyon biri değişken. değişken için observale diğeri için action

1
2
3
4
5
6
7
8
9
10
11
import {observable,action} from "mobx";
 
class MainStore{
  @observable name = 'ali desidero';
 
  @action getName(){
    return this.name;
  }
}
 
export default new MainStore();

sonra kullanacağımız sayfada hem değişken hem fonksiyonu nasıl kullanabilirim?

ilk önce import ediyorsun.

1
2
import { observable } from "mobx";
import MainStore from "./src/Store/MainStore";

sonra artık nerede kulllanacaksan o bölgeye gelip (console log kısmını kaldırmayı unutmayın :))

1
2
console.log(MainStore.name);
    console.log(MainStore.getName());

react mobX kurulumu

1
npm i --save mobx mobx-react

1
npm i metro-react-native-babel-preset @babel/preset-flow @babel/plugin-proposal-decorators --save-dev

daha sonra proje klasörümüze “.babelrc” diye bir dosya oluşturup içine aşağıdakileri yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",{
      "legacy": true
    }
    ]
  ]
}

react native async storage kurulumu & kullanımı

phpde session’ın react versiyonu diyebiliriz.

kurulumu;

1
npm i @react-native-async-storage/async-storage

kullanımı

1
import AsyncStorage from "@react-native-async-storage/async-storage";

exportun hemen altında şöyle örnek bişiyle;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
componentDidMount = async() => {
       AsyncStorage.setItem('api_key',"1234123");
       AsyncStorage.setItem('api_key_dizi',JSON.stringify(['a','b','c']));
 
    /* AsyncStorage.getItem('api_key').then((res) =>{
        console.log(res)
      }); */
 
    const api_k = await AsyncStorage.getItem('api_key'); //await için async() yazman lazım yukarı
    console.log(api_k);
 
    const api_dizi = await AsyncStorage.getItem('api_key_dizi'); //await için async() yazman lazım yukarı
    console.log(JSON.parse(api_dizi))
 
 
  }

react native 0.61.5 resim göstermeme sorunu

her boku doğru girdim ama resim gözükmüyor diyorsanız;

  1. Navigate to node_modules>>react-native>>Libraries>>image
  2. Open RCTUIImageViewAnimated.m in your fav. editor
  3. Replace the following code
    if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }
    with
    if (_currentFrame) { layer.contentsScale = self.animatedImageScale; layer.contents = (__bridge id)_currentFrame.CGImage; }else { [super displayLayer:layer]; }
  4. Save the file

adam yapmış direk githubdan aldım koydum. ben denedim çalışıyore

react ikon paketi ekleme

0.61.5 react sürümü kullandıktan sonra (daha diğer paketlerde kurulumu öğrenmedim ve olmadı zaten) aşağıdaki işlemleri yapıyoruz.

1
npm install --save react-native-vector-icons

sonra arkasından klasik olan

1
2
3
cd ios
pod install
cd ..

1
react-native link

bu salak şey hata verirse bunları çalıştırdıktan sonra xcode ile projeyi aç

File -> WordSpace Setting diyoruz

açılan pencerede en üstteki New Build System, ikincisi Legacy Build System yapıyoruz ve kapatıyoruz. Sonra tekrar çalıştırıyoruz. Kullanımı ile ilgili yazı burada.

react sayfadan çıktığında ve girdiğinde bilgi sahibi olma

1
2
3
4
5
6
7
8
9
componentDidMount() {
        this.props.navigation.addListener('willFocus',()=>{
            alert('Indexe geri geldin');
        })
 
        this.props.navigation.addListener('willBlur',() => {
            alert("gittin")
        })
    }

ilkinde başka bir sayfadan o sayfaya geçiş yaptığında yapılması istenen.

ikincisi ise o sayfadan diğer bir sayfaya geçişte yapılacaklar.

react native navigation farklı farklı klasörlere koyma

şimdi amaç şu: güzel güzel farklı farklı klasörlere herbir view dosyasını koymak özetle.

App.js içine;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  TextInput,
  StatusBar,
  TouchableOpacity
 
} from 'react-native';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createDrawerNavigator} from "react-navigation-drawer";
import Route from "./src/Route";
export default class App extends React.Component{
  render(){
    return <Route/>
  }
}

sonra src diye klasör oluştur. içine screens diye klasör oluştur. Home, detail ve drawer diye klasör oluştur ve içlerine index.js dosyası oluştur.

home indexjs dosyası içine;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import {SafeAreaView, ScrollView, Text, TouchableOpacity, View} from "react-native";
 
export default class Home extends React.Component {
 
    constructor() {
        super();
    }
 
    render(){
        return (
            <SafeAreaView>
                <ScrollView>
                    <View >
                        <Text>To-Do Applssication</Text>
                        <TouchableOpacity onPress={()=>this.props.navigation.openDrawer()}>
                            <Text>Git</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

details indexjs içine

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import {SafeAreaView, ScrollView, Text, TouchableOpacity, View} from "react-native";
 
export default class Detail extends React.Component {
 
    constructor() {
        super();
    }
 
    render(){
        return (
            <SafeAreaView>
                <ScrollView>
                    <View >
                        <Text>To-Do Applssication</Text>
                        <TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail')}>
                            <Text>Git</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

drawer indexjs içine

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
import React from 'react';
import {SafeAreaView, ScrollView, Text, View} from "react-native";
 
export default class  Drawer extends React.Component {
 
    constructor() {
        super();
    }
 
    render(){
        return (
            <SafeAreaView>
                <ScrollView>
                    <View >
                        <Text>To-Do Applssication</Text>
                        <Text>Ali Koç</Text>
                        <Text>Ali Koç</Text>
                        <Text>Ali Koç</Text>
                        <Text>Ali Koç</Text>
                    </View>
                </ScrollView>
            </SafeAreaView>
        )
    }
}

geldik finale. src içine Route.js oluştur ve içine;

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
import React from 'react';
 
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createDrawerNavigator} from "react-navigation-drawer";
 
import Home from "./screens/Home";
import Detail from "./screens/Detail";
import Drawer from "./screens/Drawer";
 
const HomeStack = createStackNavigator({
    Home:{screen:Home}
})
 
const DetailStack = createStackNavigator({
    Detail:{screen:Detail}
})
 
const DrawerStack = createStackNavigator({
    Drawer:{screen:Drawer}
})
 
const AppBottomNavigator = createBottomTabNavigator({
    Home:HomeStack,
    Detail:DetailStack
})
 
const AppNavigator = createDrawerNavigator({
    Home: AppBottomNavigator
},{
    contentComponent:Drawer
});
 
 
export default createAppContainer(AppNavigator);