Kategori: Uncategorized

react native map circle kullanımı

1
2
3
4
5
6
7
8
9
<Circle
                 onPress={()=>alert('tıklandı')}
                 strokeWidth={3}
                 strokeColor={"red"}
                 radius={100}
                 fillColor={"yellow"}
                 center={{latitude: 41.051873, longitude: 28.809529}}
 
             />

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

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