Kategori: React Native

React Native Notları

Windowsta yeni bir react-native projesi oluşturmak için:

istediğiniz yere (masaüstü olabilir) örneğin “react-projeleri” adında bir klasör oluşturup dizin yolunu kopyalayın ardından cmd açıp

cd C:\Users\username\Desktop\react-projeleri

yazıyoruz. İlgili proje klasörünün içindeyken aşağıdaki komutu verip react projemizin oluşmasını bekliyoruz.

react-native init proje1

Bu biraz zaman alacaktır. İşlem bittiğinde aşağıdakine benzer bir sonuç göreceğiz:

  Run instructions for iOS:
    • cd C:\Users\username\Desktop\react-projeleri\proje1 && npx react-native run-ios
    - or -
    • Open proje1\ios\proje1.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd C:\Users\username\Desktop\react-projeleri\proje1 && npx react-native run-android

Projemizi windowsta başlatmak için:

cd proje1

ardından

react-native run-android

React Native Found Xcode project xcrun: error: unable to find utility HATA ÇÖZÜMÜ

React Native Found Xcode project xcrun: error: unable to find utility HATA ÇÖZÜMÜ için yapılması gerekenlerden önce hatamızı görelim:

HATA:

Found Xcode project TestProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer   
tool or in PATH
 
Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer 
tool or in PATH

ÇÖZÜM:

Xcode’da Xcode menüsünü, ardından Tercihler’i ve ardından Konumlar sekmesini seçin. Açılır listeden Xcode sürümünüzü seçin ve Xcode’dan çıkın.

Yine de çözülmezse burayı gözden geçirmenizde fayda var.

React Native Uygulamada Klavyeyi Otomatik Kapatmak

Bir metin girişine dokunduğumda, klavyeyi tekrar kapatmak için başka bir yere dokunabilmek istiyorum (geri tuşu değil).

örnek kodunuz böyleyse:

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

şu kod ile değiştirin:

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

yada şununla:

import {Keyboard} from 'react-native'
 
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

yada klavyeyi kapatmak için aşağıdakine benzer bir yapı kullanabilirsiniz:

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';
 
const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)
...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

NOT: accessible={false}giriş formunun VoiceOver aracılığıyla erişilebilir olmasını sağlamak için gereklidir. Görme engelli insanlar size teşekkür edecek!

React Native ve React arasındaki fark nedir?

React’i merak edip öğrenmeye başlayanlar React ve React Native arasındaki farkı bilmek isteyebilirler.

ReactJS , kullanıcı arabirimleri ve web uygulamaları oluşturmak için hem ön uç web’i hem de sunucuda çalıştırmayı destekleyen bir JavaScript kitaplığıdır.

React Native , yerel uygulama bileşenlerini derleyen ve JavaScript’te ReactJS’yi bileşenlerinizi oluşturmak için kullanmanıza izin veren farklı platformlar (iOS, Android ve Windows Mobile) için yerel mobil uygulamalar oluşturmanıza yarar. React Native ile tek satır kod yazarsınız hem android hem ios için 2 farklı çıkış alırsınız diyebiliriz.

Her ikisi de açık kaynak kodludur.

ERROR: JAVA_HOME is not set and no ‘java’ ÇÖZÜMÜ

React-Native Geliştirirken yada farklı bir uygulama yaparken başınıza gelebilecek normal hatalardan birisi:

ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.

ÇÖZÜMÜ:

Görselden anlayacağınız üzere ilgili yere JAVA_HOME isimli değişken oluşturup bilgisayarımızda yüklü olan java jdknın konumunu gösteriyoruz sorun çözülüyor.

Unable to load script.Make sure you are either running a Metro server React Native Hata Çözümü

Yabancı forumlarda tıpkı ben gibi React Native yeni yükleyip bu hatayı alanların sayısının epeyce çok olduğunu görünce çözüme dair böyle bir not eklemek istedim hataya ve çözüme gelmeden önce şunları belirteyim
Windows üzerinde React Native ile geliştirme yapmak için kurduğum temel araçlar:
– NodeJS 12.13.0 LTS,
– NPM
– Java 12 JDK
– Python 3
– React Native Cli NPM üzerinden kurdum
– Android Studio 3.5.1
– Android SDK (android 10)

bunların kurulumunu sorunsuz yaptım java ve android sdk için ortam değişkenlerini de ayarladım.

react-native init appadi komutu ile react uygulamamı oluşturdum
ardından react-native run-android ile çalıştırdım.

Aldığım Hata:
Unable to load script.Make sure you are either running a Metro server or that your bundle ‘index.android.bundle’ is packaged correctly for release

stackoverflow önerilen Çözüm:

1. UYGULAMANIZIN android/app/src/main/ DİZİNİNE GİDEREK BOŞ BİR assets İSMİNDE KLASÖR OLUŞTURUN.
2. ARDINDAN UYGULAMANIZIN ANADİZİNİNDEYKEN KOMUT SATIRINA AŞAĞIDAKİNİ YAZIP ÇALIŞTIRIN.
react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res
3. UYGULAMANIZI TEKRAR BAŞLATIN:
react-native run-android

videolu anlatımı:

%90 HERKESİN SORUNU BURADA ÇÖZÜLÜYOR AMA BENİM SORUNUM ŞÖYLE DEVAM ETTİ,

error Invalid regular expression: /(.*\\__fixtures__\\.*|node_modules[\\\]react[\\\]dist[\\\].*|website\\node_modules\\.*|heapCapture\\bundle\.js|.*\\__tests__\\.*)$/: Unterminated character class. Run CLI with –verbose flag for more details.

BUNU AŞMAK İÇİN DE:

1) UYGULAMANIZIN İÇİNDEKİ node_modules\metro-config\src\defaults\blacklist.js DOSYAYI EDİTÖRLE AÇIN
2) ŞU KODU BULUN:
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];

3) BU KOD İLE DEĞİŞTİRİN:

var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];

ARDINDAN

react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res

çalıştırın.

ARDINDAN

react-native run-android yazarak

PROJEYİ TEKRAR BAŞLATIN SORUNUNUZ ÇÖZÜLDÜ.

SORUN DEVAM EDİYORSA YORUM OLARAK BELİRTİN MUTLAKA DÖNÜŞ YAPACAĞIM.