Kategori: react

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

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

react component oluşturma ve değer gönderme

bakın son defa uyarıyorum bu bilgiler bana özel. istediğinizi alamaz iseniz genel anlatımı iyi olan insanlardan faydalanın.

İlk önce proje klasöründe yeni bir dosya oluşturuyoruz. FirstComponent diye bişi oluştur içine

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import { View,Text } from 'react-native';
 
const FirstComponent = ({name,text}) => {
    return(
        <View>
            <Text>{name}, {text}</Text>
        </View>
    )
}
export default  FirstComponent;

daha sonra app.js dosyamıza gelip from react native yazan yerin altına

1
import FirstComponent from "./FirstComponent";

sonra gel abi view içine

1
<FirstComponent name={"Cafer"} text={"Hoşgeldin"}/>

reactive proje oluşturma ve çalıştırma #kendimebilgiler

merhabalar

kendime bilgiler başlığı altında paylaştıklarım sadece benim kendime unutmayayım diye anlattıklarımı içerir. eğer anlamlı bir mesaj çıkarmadıysanız yazımdan çok üstelemeyin ve diğer metinlere bakınız.

proje oluşturma
bir üst klasöre gelip bunu yazıyoruz. firstapp alt klasörünü oluşturuyor ve içine dosyalar oluşturuyor bu kod.
react-native init FirstApp –version 0.61.5

proje çalıştırmak için cd Firstapp yazıp ilgili dosyanın içine girip aşağıdaki kodları yazıyorsunuz.

proje çalıştırma ios
react-native run-ios

proje çalıştırma android
ilk önce android klasörü altında local.properties bir dosya oluştur. içine sdk.dir=/Users/ali/Library/Android/sdk yaz. daha sonra android->gradle->wrapper->gradle-wrapper.properties dosyası içine gradle-5.5 yazıyorsa bunu 6.3 olarak düzenle.

react-native run-android yazarak devam et.