Reaksiyon Yerlisi Nedir?

Reaks Yerlisi, Facebook tarafından geliştirilen açık kaynak çerçevesidir ve geliştiricilerin JavaScript ve Reaktör kullanarak mobil uygulamaları geliştirmelerini sağlar. Web görüşlerini oluşturan geleneksel hibrit yaklaşımlardan farklı olarak, Reak Yerli derlemeleri yerel platform bileşenlerine olanak sağlar.Bu, uygulama arayüzünün gerçek ana görüşlerle inşa edilmesi anlamına gelir (örneğin iOS ve FLT:0).

Reaks Yerlisi 2015 yılında ilk serbest bırakıldı ve Instagram, Shopify ve Discord dahil büyük şirketler tarafından kabul edildi. Kütüphanelerin canlı topluluğu ve ekosistemi de başlangıçlar ve işletmeler için pratik bir seçim yaptı.

Reaksiyon Yerlisi ile Başlayın: Çevre Kurulum

Herhangi bir Reaksiyon Yerlisi kodunu yazmadan önce, gelişim ortamınızı kurmak zorundasınız. Tam adımlar iOS, Android veya her iki hedefe bağlı olarak farklılık gösterir ve Reaksiyon Yerlisi Küçlütünü Ya da Expo'yu kullanmanız gerekir.

Önlemler Önlemler

  • [FONT:0) Hayır, hayır.js & npm (veya Öpücü): [Dönder: 18 veya yeni sürüm önerilir. Download from 03.05.2012[değiştir | kaynağı değiştir]
  • [FONT=0)Watchman (macOS/Linux): Facebook tarafından performans geliştiren bir dosya izleme aracı ([Dönetici: 2)
  • [FONT=0)Xcode (iOS sadece): iOS simülatörü üzerinde inşa etmek ve test etmek için gerekli. Mac App Store'dan indirin.
  • [[Dönetici Stüdyosu (Android sadece):[Dönetici:0) Android emülatörler ve araçlama için gerekli olan. kurulum sırasında Android Sanal Cihazı (AVD) kurdu.

Reaksiyon Yerlisi ile Çiftliği Seçin

Bir Reaksiyon Yerli projesine başlamak için iki temel yol var:

  • [FONT=0]Ana Sayfa:[Döneticileri)[[Döneticileri)) Yerel kod üzerinde tam kontrole sahipsiniz ve özel yerli özellikler veya performans optimizasyonları gerektiren projeler için en iyi şekilde entegre edebilirsiniz.
  • [FONT:0)Expo:[Dönetici:0) A managed framework üst of Reaks Yerlisi üzerinde inşa edilmiş ve en yerli konfigürasyondan uzak ve zengin bir önceden inşa edilmiş modüller (camera, push bildirimleri vs.) Özel olarak hızlı prototipleme ve projeler için idealdir.

Bu kılavuz için, Reaksiyon Yerlisi'ni kullanacağız çünkü size yeni bir proje oluşturmak için en esnekliği verir:

npx @react-native-community/cli init MyApp

İlklemeden sonra, proje klasörüne gidin ve Metro paketleyiciyi başlatmak için 444D4'ü açın ve ikinci bir terminal açın ve çalıştırın: 5'i veya 444FLT:6'yi bir emülatör veya cihazda başlatmak için.

Reaksiyon Yerlisi'nde Temel Kavramlar

Mastering Reaction Yerli, temel bina bloklarını anlamalı - web için doğrudan Reaktif uzantıları olan.

Bileşenler

Reaksiyon Yerlisi'ndeki her şey bir bileşendir. Çerçeve, yerel UI elementlerine haritanın bir dizi temel bileşen sunar:

  • [FONT:0] – Flexbox, stil ve dokunma işlemi ile düzeni destekleyen bir konteyner.
  • [FONT:0] - Web HTML'nin aksine, herhangi bir metinyi içine sokmalısınız.
  • [FONT:0] - Yerel veya uzaktan görüntüler.
  • [FONT:0] - Bir jenerik taşıyıcı.
  • [FONT:0] - Bir metin girişi alanı.
  • [FONT:0] - Görsel geri bildirimle dokunmaya bir bakış açısı verir.
  • [FONT:0] - Büyük veri setleri için yüksek performanslı liste bileşeni.

Ayrıca bu ilkelleri birleştirerek özel bileşenleri oluşturabilirsiniz. Tamam bir liste için, [[0] resmi Reaksiyon Yerli Belgeleri ).

Devlet ve Pers

Bunlar web için Reaktör olarak aynı kavramlardır:

  • [FONT:0)Props:[Döneticiler için Kısa: Sadece bir ebeveyn bileşeninden bir çocuk bileşenine kadar geçen değerleri okunur. Çocuk davranışını veya görünümünü yapılandırırlar.
  • [FONT:0) Devlet:[Dönetici:[Dönetici:0))[Dönetici:[FONT) veya [[Döneticiler)))))))))))))))))))))))))))))))))))))))))))))) veya [[Düzücüler (kürücüler)))))))))))))))))))))))))))))))))

Örnek: Örnek:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

Navigasyon React Navigation[Dönetici) tarafından inşa edilmez. En popüler çözüm React Navigation) bir yığın navigator (bir navigasyon yığını gibi), bir sekme navigator ve bir çekmece navigator.

npm install @react-navigation/native @react-navigation/stack

Kurulumdan sonra, uygulamanızı [[Üyetim:) ile kapatın ve ekranlarınızı tanımlayın:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Styling

Reaksiyon Yerlisi CSS nesnelerini CSS yerine şekillendirmek için kullanır.SeksS: CSS uygulamaları kullanarak stilleri tanımlarsınız.Sessiz tasarım veya inline nesneler.The setting engine is Flexbox by default, with properties likeUVT:23), [[ŞUygun|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

İlk Cross-Platform App: Bir Adım-by-Adım Örnek Örnek

Verileri bir kamu API'sinden getiren basit bir hava uygulaması yapalım ve her iki platformda da gösterelim. Bu durum devlet yönetimi, ağ talepleri ve bileşen kompozisyonunu gösterecektir.

Adım 1: Proje Kurulum

Reaksiyon Yerlisi'ni kullanarak yeni bir proje oluşturun:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Adım 2: Yükleme Bağımlılığı

Birkaç pakete ihtiyacımız var:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

API çağrısı için, inşa edilmiş-inurFLT:30'ı API'yi kullanacağız. Seçmeli olarak ikonlar için [[FONTT:31'i kuracak.

Adım 3: Ev Ekranını Yapın

A)

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Adım 4: Wire Up Navigation

[Üyelim: 34) “Hareketçiyi ve ekranını ithal edin:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Adım 5: App the App

Metro paketleyicisi ([[DÜDÜDÜDÜDÜDÜŞÜŞÜŞÜN) veya iOS ([[[DÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜ)) ile başlayın.Bir metin girişi, bir düğme ve hava durumu başarılı API çağrısından sonra.

Bu temel uygulama aynı JavaScript kodu ile her iki platformda da çalışır. Bu, Reaks Yerlisinin gücüdür.

Reaksiyon Yerli Kullanımının Avantajları

  • [[0)Komün Reusability:[Dönetici:[Dönetici: · 1 ) İş mantığı, devlet yönetimi ve platformların üzerindeki UI bileşenleri. Web için Reusability:[FONT:0)
  • [FONT:0)Performance:[Dönetici performansına bağlı olarak, UI yerel bileşenleri kullanarak, web görüşlerini kullanmamaktadır. JavaScript thread, asynchronously ve ağır hesaplamalar yerel modüllere yüklenebilir.
  • [FONT:0]Large Topluluğu & Ekosistem: Binlerce kütüphane, GitHub'da canlı bir topluluk ve geniş araçlama sorunları iyi bir şekilde ele alındı ve eklentiler neredeyse her ihtiyaç için var.
  • [FONT=0) Hot Reload ile hızlı bir gelişme: Metro paketi Hot Modül Değiştirmeyi destekler (HMR). Tüm uygulamayı yeniden inşa etmeden kodu değiştirebilir ve değişiklikleri anında görebilirsiniz.
  • [FONT=0)Over-the-Air Updates:[Döneticileri ile Microsoft App Center veya CodePush gibi hizmetlerle doğrudan JavaScript ve varlık güncellemelerini uygulama mağazası onayı olmadan kullanabilirsiniz.
  • [FONT:0]Cost-Effective: Bir takım iki ayrı yerli takım yerine tek bir kod tabanı tutabilir. Bu hem gelişim hem de bakım maliyetlerini azaltır.

Meydanlar ve Sınırlar

Güçlülerine rağmen, Reaks Yerlisi bir gümüş mermi değil:

  • [FONT=0]Native Modüller: [Dönetici: [Dönetici:0]Native Modüller:[Dönetici:0)) Java/Kotlin (Android) veya Objektif-C/Swift (iOS) ile kapamadığınızda, yerel gelişim uzmanlığına erişmek gerekir.
  • [FONT:0)Performance Şişenecks:[DD:0] Reaksiyon Yerlisi JavaScript ve yerli iplikler arasında bir köprüye dayanıyor. Çok karmaşık animasyonlar, gerçek zamanlı grafikler (üçD oyunlar gibi), veya ağır veri işlemenin çoğu iş uygulamaları için, performans yeterli, ancak oyunlar veya yoğun uygulamalar için Flutter veya tam yerli.
  • [FONT:0)Debugging Kompleksi:[Dönetici:[Dönetici:0)Debugging Kompleksi geliştirilirken, platforma özgü hataların sorunlanması yalnızca bazı Android cihazlar veya iOS versiyonlarında meydana gelebilir.Reaks Yerli topluluk ve araçları Flipper yardımı gibi, ancak debugging deneyimi yerli gelişme olarak sorunsuz değildir.
  • [FONT:0)UI Consistency:[[Dönetici:[Dönetici: 0,0) Farklı (örneğin, 0:39) iOS ve Android'de farklı görünümlere sahip olabilir, platforma özgü stil veya bileşenler yazabilirsiniz.TheurFLT).:40 API, her platformda gerçekten de bir piksel mükemmel tasarım oluşturmak için yardımcı olur.
  • [0]Uygulamanın “[Döneticileri)” (Döneticileri veya JavaScriptCore) dahil olmak üzere tüm yerel uygulamalardan daha büyük olma eğilimindedir.

Gelişmiş Konular: Daha Fazla İhtiyacınız olduğunda

Yerli Modüllerle etkileşim

Bir JavaScript kütüphanesinin var olmadığı boşlukları köprülemek için, bir yerel modül yazabilirsiniz. Örneğin, bir topluluk paketi tarafından desteklenmeyen bir donanım sensörü kullanmak için:

  • Android: A Java sınıfı oluşturun ve paketi ile kayıt edin.
  • iOS: {FONT/ObjC sınıfı oluşturmak, protokole sahip olmak.
  • Sonra JavaScript'den arayın: “DörtÜŞÜN ÂHÂYİ ÂNİ ÂHİR ÂNİ ÂHİR ÂNİ ÂHİR ÂNİ ÂHİR ÂNİ ÂNİ ÂNİ ÂHİR ÂNİ ÂNİ ÂHİR ÂNİ ÂHİR ÂNİ ÂNİ ÂHİR ÂNİ ÂHİR ÂNİ ÂHİRİ ÂNİ ÂNİ ÂHİRİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂNİ ÂHİRİ ÂNİ ÂHİRİ ÂNİ ÂHİRİ ÂNİ ÂNİ ÂNİ ÂHİRİ ÂNİ ÂNİ ÂHİRİ ÂNİ ÂNİ ÂHİRİ

Performans Optimizasyon Stratejileri

  • [FONT:0) Use Hermes: [DÜDÜDÜŞÜNÜŞÜNCÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜ: 0:0) Uygulama: [DÜŞÜNCÜyetim: [DÜye Olmayanlar: [Üye Olmayanlar İçin Tıklayınız.
  • [FONT=0)FlatList vs.View:[DÜT:1) UseETHFLT 46 veya [[DÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜye Olmayanlar, uzun listelere göre görüş ve ekran dışı eşyaları geri döndürürler.
  • [FONT:0)Memoization:[Dönetici:[Dönetici: · 1) ve [FONTDÜŞÜŞÜNÜŞÜŞÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞ
  • [FONT:0)Stactaman:[Dönetici:[Dönetici:0)[Dönetici:[Dönetici:[Dönetici:[Dönetici: · 8))) Animasyonlar veya geçişler tamamlandıktan sonra ağır hesaplamalar.
  • [FONT=0]Native Sürücüler Animasyonlar için:) UseETHFLT:50) Sürekli olmayan özellikler (yoğun, transformasyon) Bu yükleri yerel iplike taşır.
  • [FONT:0) Image Caching: [DÜDÜDÜDÜDÜDÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜye Değerler: [Üye Olmayanlar İçin Tıklayınız.

Uygulamanızı Test Etmek

Reaksiyon Yerlisi çeşitli test stratejileri destekler:

  • [FONT:0)Ölmüş test:[Dönetici:0)))) Saf işlevleri ve mantığı test etmek için Jest (pre- yapılandırılmış) kullanın.
  • [FONT:0)Component testi:[Dönetici:[Dönetici:0) Reaktif Yerli Test Kütüphanesi bileşenleri ve kullanıcı etkileşimleri oluşturmak için kullanın.
  • [FONT:0]Bit bit-to-Bitiş Test:[Döntme:0][Dönetici:0)Dört-Bitiş Test:[Dön test:0)Dx by Wix gerçek cihazlarda ve simülatörler üzerinde çalışan popüler gri-box E2E test çerçevesidir.

App Stores'lara İş Yap

dağıtmadan önce, bir üretim hazır bir yapıya sahip olmanızı sağlayın:

  • Her iki platform için de uygulama simgeleri ve üşü ekranları yapılandırın.
  • Uygulama sürümünü ayarlayın ve [[ŞUYGÜŞÜŞÜNÜŞÜŞÜNÜŞÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜŞÜNÜ Uygulama sürümününiverÜ Uygulama ve ÖLÜLÜMÜ
  • Android için: Android Studio anahtar mağazası kullanarak imzalanmış bir parfüm veya AAB'yi Genrate. sonra Google Play Console'a yük.
  • iOS için: Xcode'daki uygulama (Ürün > Archive), dağıtım sertifikası ile imzalayın ve Xcode veya Transporter'ı App Store Connect'e yükleyin.
  • GitHub Actions veya Bitrise gibi sürekli entegrasyon hizmetlerini otomatikleştirmek ve imzalamak için kullanmayı düşünün.

Reaksiyon Yerli Uygulamalarının Gerçek Dünya Örnekleri

  • [FONT:0)Instagram (Explore Tab / Threads): [Dönetici:0) Instagram, Uygulamanın parçaları için Reaksiyon Yerlisini kullanıyor ve tek bir temayı yaparken platform kodu paylaşımına ulaştılar.
  • [FONT:0)Discord (Mobile): Discord'ın mobil uygulaması, Android ve iOS arasında paylaşılan performans ve kod paylaşımı için Hermes motorundan faydalanıyor.
  • [FONT:0)Walmart:[Dönetici:[Dönetici: 0,4][/FONT=0) Perakende devi, her iki platformda da neredeyse aynı deneyimlere sahip ve gelişim süresini azaltmaktadır.
  • [FONT:0)Uber Yemekleri (Restaurant Dashboard):[[Dönemli: 1) Uber Yemekleri, restorana açılan pano için Reaksiyon Yerlisini kullanır, hızlı iterasyon ve çapraz platform dağıtım sağlar.

Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç

Reaksiyon Yerli, performans, geliştirici deneyimi ve kod yeniden kullanılabilirliği arasındaki denge nedeniyle çapraz platform mobil gelişimi için en iyi seçimdir.Özellikle grafik yoğun uygulamalar ve yerel modül karmaşıklığı - çoğu standart mobil uygulama için e-ticaretten sosyal medyaya işletme araçlarına kadar.

Ana kavramları (komponentler, eyalet, navigasyon, stil), geniş kütüphane ekosistemini kullanarak ve performans ve test için en iyi uygulamaları takip ederek, her iki iOS ve Android kullanıcıları için tek bir kod tabanıyla yüksek kaliteli uygulamaları sunabilirsiniz. Resmi uygulamanızı kullanın:0React Yerli dokümantasyon). birincil referansınız olarak, ve topluluk kaynaklarını keşfedin:2React AlienI:2React Yerli Rehberlik[Döneticileri için yüksek kaliteli uygulamalar sunar.