Etiket: react native notları

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 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!

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.