Yazar: admin

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);

react drawer-stack ve bottom (yandan açılan ve alttan) menüyü bir arada kullanma

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React,{Component} 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 Animated from 'react-native-reanimated';
 
 
class App extends 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>
    )
  }
}
class Detail extends 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>
    )
  }
}
class Drawer extends 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>
    )
  }
}
 
const HomeStack = createStackNavigator({
  Home:{screen:App}
})
 
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);

react Drawer (yandan açılan menü) oluşturma

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React,{Component} 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 Animated from 'react-native-reanimated';
 
 
class App extends 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>
    )
  }
}
class Detail extends 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>
    )
  }
}
class Drawer extends 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>
    )
  }
}
 
const HomeStack = createStackNavigator({
  Home:{screen:App}
})
 
const DetailStack = createStackNavigator({
  Detail:{screen:Detail}
})
 
const DrawerStack = createStackNavigator({
  Drawer:{screen:Drawer}
})
 
const AppNavigator = createDrawerNavigator({
  Home: {screen:HomeStack},
  Detail:{screen:DetailStack},
  Drawer:{screen:DrawerStack},
 
},{
  contentComponent:Drawer
});
export default createAppContainer(AppNavigator);

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated’s babel plugin? hatası

boşu boşuna uğraşmayın mk. bulduğum tek çözüm bir önceki sürüme geri dönmez. nasıl mı?

package.json dosyasına geliyorsun orada aşağıdaki kod satırının başını bulursun yine aşağıda yazdığım sürümü oraya entegre ediyorsun hepsi bu kadar.

1
"react-native-reanimated": "^1.13.2",

react alt menü örneği

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
import React,{Component} 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";
 
class App extends Component {
 
  constructor() {
    super();
  }
 
  render(){
    return (
        <SafeAreaView>
          <ScrollView>
            <View >
              <Text>To-Do Applsication</Text>
              <TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail')}>
                <Text>Git</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </SafeAreaView>
    )
  }
}
class Detail extends Component {
 
  constructor() {
    super();
  }
 
  render(){
    return (
        <View >
          <Text>To-Do Application</Text>
 
 
 
        </View>
    )
  }
}
 
const HomeStack = createStackNavigator({
  Home:{screen:App}
})
 
const DetailStack = createStackNavigator({
  Detail:{screen:Detail}
})
 
const AppNavigator = createBottomTabNavigator({
  Home:HomeStack,
  Detail:DetailStack
});
export default createAppContainer(AppNavigator);

react stack navigator örnek 1

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
import React,{Component} 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";
 
 
class App extends Component {
 
  constructor() {
    super();
  }
 
  render(){
    return (
        <View >
          <Text>To-Do Application</Text>
          <TouchableOpacity onPress={()=>this.props.navigation.navigate('Detail')}>
            <Text>Git</Text>
          </TouchableOpacity>
 
 
        </View>
    )
  }
}
class Detail extends Component {
 
  constructor() {
    super();
  }
 
  render(){
    return (
        <View >
          <Text>To-Do Application</Text>
 
 
 
        </View>
    )
  }
}
 
const AppNavigator = createStackNavigator({
  Home:{
    screen:App
  },
  Detail:{
    screen:Detail
  }
},{
  initialRouteName:'Home' /* hangi sayfa açılmasını istiyoruz ilk başta */
});
export default createAppContainer(AppNavigator);

react navigation kurulumu

ilk burada 4.x olanı kur.

https://reactnavigation.org/docs/4.x/getting-started

burayı uygula komple.

aşağıdakilerden biri lazım olursa kur

1
npm i react-native-navigation

1
npm i react-native-screens  

1
npm i react-navigation-stack --save

1
npm i react-navigation-drawer --save

1
npm i react-navigation-tabs

1
npm i react-native-gesture-handler

1
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

1
cd ios; pod install; cd ..

bende saçma sapan bir hata çıktı kurarken. kendime yine not bırakıyorum siz yapın diye değil bu.

ios içinde Podfile dosyası içinde use flipper diye bi yer varsa bunla değiştir.

1
use_flipper!({ 'Flipper-Folly' => '2.3.0' })

örnek kod:

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
import React,{Component} 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";
 
class App extends Component {
 
  constructor() {
    super();
  }
 
  render(){
     return (
        <View >
            <Text>To-Do Application</Text>
 
 
 
        </View>
    )
  }
}
 
 
const AppNavigator = createStackNavigator({
  Home:{
    screen:App
  }
});
export default createAppContainer(AppNavigator);

Polylang WordPress Temanın Bazı Yerlerlerini Çevirme

Polylang eklentisini kullanıyoruz. Bazı yerleri değiştiremiyor olabilirsiniz. Örneğin adam tema paneli yapmış olsun. En üste contact number koymuş olsun. Tek bir girişi var nasıl değiştiricez?

şimdi gideceksiniz ilk önce temanın function.php dosyasına şu kodu yazıyoruz.

1
2
3
add_action('init', function() {
  pll_register_string('contactnumberen', 'Contact Number');
});

bunu yazdın mı? yazdıktan sonra eklentinin yan tarafta yer alan menüsünde Strings translations sayfasına giriyorsun. Yazdığın contact number otomatik orada. Orada işte çevirme işlerini hallediyorsun. Sonra tabi değişmiyor? Bunu temanın ilgili alanına da tanımlaman gerekiyor. Burayı nasıl bulursun?

Contact number üst taraftaysa header.php içinde oluyor ama yeni temalarda trilyon tane sayfa var. Bu yüzden oranın aldığı class değerini sayfa kaynağından buluyorsun. Sonra temayı indiriyorsun. Sonra notepad açıp o temadan bir dosya açıp ctrl f tuşuna basıyorsun. Orada klasörde ara seçeneği var. bulduğun class değerini oraya yapıştırıyorsun. Tüm dosyalarda arıyor ve sana gösteriyor. sonra o dosyanın ilgili yerine gelip;

1
<?php pll_e('Contact Number'); ?>

yazıyorsun bu kadar.

react to-do uygulaması

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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React,{Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
    TextInput,
  StatusBar,
    TouchableOpacity
 
} from 'react-native';
 
export default class App extends Component {
 
  constructor() {
    super();
    this.state ={
        text:'',
        data:[]
    }
  }
 
  handleSave = () => {
      const  {text,data} = this.state;
      data.push({text});
      this.setState({data:data,text:''})
  };
 
  render(){
    const {text,data} =this.state
    return (
      <View style={[{flex:1,paddingTop:60,}]}>
          <View style={style.title}>
              <Text style={style.title_text}>To-Do Application</Text>
          </View>
          <View style={{backgroundColor:'#ccc',padding:10,flexDirection:'row'}}>
              <TextInput
                  style={style.input}
                  value={text}
                  onChangeText={(text)=>this.setState({text:text})}
              />
              <TouchableOpacity onPress={this.handleSave} style={style.button}>
                  <Text style={style.title_text}>Ekle</Text>
              </TouchableOpacity>
 
 
          </View>
          <View>
              {data.map((item) => {
                        return <Text>{item.text}</Text>
                  })
              }
          </View>
 
      </View>
    )
  }
}
const style = StyleSheet.create({
    title:{padding:10,backgroundColor:'green'},
    title_text:{color:'white',textAlign:'center',fontSize:16,fontWeight:'700'},
    input:{padding: 10,backgroundColor: 'white',flex:1},
    button:{padding:10,backgroundColor:'gray',borderRadius:5,marginLeft:10}
});

react constructor & changeState örnek

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
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
 
import React,{Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity
 
} from 'react-native';
 
export default class App extends Component {
 
  constructor() {
    super();
    this.state ={
        name:'Cafer',
        year:1995
    };
  }
 
  changeState = () => {
      this.setState({
          name:'Ali',
          year: 1993
      },()=>{
          alert("Bilgiler Güncellendi")
      });
  }
 
  render(){
    const { name,year } = this.state;
    return (
      <View style={[style.welcome_are,{backgroundColor: 'green'}]}>
          <Text>{name} {year}</Text>
          <TouchableOpacity onPress={this.changeState}>
            <Text>Değiştir</Text>
          </TouchableOpacity>
      </View>
    )
  }
}
const style = StyleSheet.create({
  welcome_are:{paddingTop:150,backgroundColor:'red'}
});