Yazar: admin

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 native sign up tasarımı

 

yukarıdaki ekranı oluşturmak için kullanılan kodlar

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
79
80
import React from 'react';
import {View, StyleSheet,Text,Image,TextInput} from "react-native";
import { SafeAreaView } from "react-navigation";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/FontAwesome5";
export default class Login extends React.Component{
    render() {
        return (
           <SafeAreaView style={style.body}>
             <ScrollView>
                <View style={style.header}>
                    <Text style={style.title}>Sign In</Text>
                </View>
                <View style={style.logo_area}>
                    <Image source={require('../../../assets/images/home.png')} />
                </View>
                <View style={style.board}>
                      <View style={style.item}>
                          <TextInput
                            placeholder={"Username"}
                            style={style.input} />
                      </View>
                      <View style={style.item}>
                        <TextInput
                          placeholder={"Password"}
                          style={style.input} />
 
                          <TouchableOpacity style={{position:'absolute',right:15,top:-33}}>
                              <Icon name={"eye-slash"} size={20} />
                          </TouchableOpacity>
                      </View>
                      <View style={[style.item,{flexDirection:'row',justifyContent: 'flex-end'}]}>
                          <Text style={{ color: "#525464",fontSize: 15 }}>Forgot your password?</Text>
                      </View>
                      <View style={style.item}>
                          <TouchableOpacity style={style.button}>
                              <Text style={style.button_text}>Login</Text>
                          </TouchableOpacity>
                      </View>
                      <View style={[style.item,{justifyContent: 'center',alignItems:'center'}]}>
                        <Text style={{ color: "#525464",fontSize: 15 }}>Or</Text>
                      </View>
                      <View style={style.social}>
                          <TouchableOpacity style={style.social_item}>
                            <Icon name={"facebook-f"} color={"#3b5999"} size={20}/>
                          </TouchableOpacity>
                        <TouchableOpacity  style={style.social_item}>
                            <Icon name={"twitter"} color={"#55acee"} size={20}/>
                        </TouchableOpacity>
                        <TouchableOpacity  style={style.social_item}>
                            <Icon name={"linkedin-in"} color={"#0077B5"} size={20}/>
                        </TouchableOpacity>
                      </View>
 
                      <View style={[style.item,{justifyContent: 'center',alignItems:'center'}]}>
                        <TouchableOpacity>
                          <Text style={{fontSize:17,fontWeight:'400'}}>Dont have an account? <Text style={{color:'#FFB19D'}}>Sign Up</Text></Text>
                        </TouchableOpacity>
                      </View>
                </View>
 
 
             </ScrollView>
           </SafeAreaView>
        )
    }
}
const style = StyleSheet.create({
    body:{backgroundColor:'white',flex:1},
    header:{padding:25,justifyContent:'center',alignItems:'center'},
    title:{fontWeight:'500',fontSize:20,color:'#525464'},
    logo_area:{alignItems: 'center',marginTop:40},
    board:{marginTop:10,paddingHorizontal:30,paddingTop:20},
    item:{marginBottom:20},
    social_item:{padding:10,borderWidth: 1,borderColor:'#E2E2E0',width:100,height: 60,justifyContent:'center',alignItems:'center'},
    social:{flexDirection:'row',justifyContent:'space-around',marginBottom: 20},
    button_text:{color:'white',textAlign:'center',fontSize:17,fontWeight: '700'},
    button:{backgroundColor:'#20C3AF',padding:15,borderRadius:5,justifyContent: 'center',alignItems:'center'},
    input:{borderWidth:1,borderColor:'#B0B0C3',backgroundColor: '#F7F7F7',paddingVertical: 10,paddingHorizontal:30,height:50}
})

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 bir buton ile değer gönderme

çok basitçe anlatıcam,

1
2
3
4
5
6
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail',{
                            id:5,
                            name:'Cafer'
                        })}>
                            <Text>Detaya Git</Text>
                        </TouchableOpacity>

ilgili Detail içine gelip;

1
2
3
componentDidMount() {
        alert(this.props.navigation.getParam("name"));
    }

Navigation başlık ismi ve rengisini değiştirme (sağa sola buton atama)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class Home extends React.Component {
 
   static navigationOptions = ( { navigation }) => {
        return {
            title:'Anasayfa',
             headerLeft:<TouchableOpacity onPress={()=>navigation.goBack()}><Text>Geri</Text></TouchableOpacity>,
        }
 
       /* title:'Anasayfa',
        headerTitleStyle:{
            color:'black'
        },
        headerStyle:{
            backgroundColor:'white'
        }
    };

hepsine aynı renk yapmak istersek;

1
2
3
4
5
6
7
8
9
10
11
const HomeStack = createStackNavigator({
    Home:{
        screen:Home
    }
},{
    defaultNavigationOptions:{
        headerStyle:{
            backgroundColor:'pink'
        }
    }
    })

alt menülü bir işlemde alt menüde yer alanların ismini değiştirmek

1
2
3
4
5
6
7
8
9
10
const AppBottomNavigator = createBottomTabNavigator({
    Home: {
        screen:HomeStack,
        navigationOptions:{
            title:'Anasayfa'
        }
    },
    Detail:DetailStack,
    Drawer:DrawerStack
})