Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Witajcie! Dziś ogłaszamy wydanie React Native 0.68.0, które wprowadza opcjonalną nową architekturę, poprawki błędów i wiele więcej.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Szczęśliwego Nowego Roku! Dziś ogłaszamy najnowszą wersję React Native 0.67.0 wraz z informacjami o ulepszeniach procesu wydań, nad którymi pracowaliśmy w ostatnich miesiącach.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Dziś wydajemy React Native v0.66 z obsługą Android 12 i iOS 15, wraz z poprawkami i ogólnymi aktualizacjami.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Dzisiaj udostępniamy React Native w wersji 0.65 z nową wersją Hermesa, ulepszeniami dostępności, aktualizacjami pakietów i innymi poprawkami.
Hermes, otwartoźródłowa maszyna wirtualna JavaScript od Facebooka zoptymalizowana pod React Native, został zaktualizowany do wersji 0.8.1. Najważniejsze funkcje w tym wydaniu to:
Nowy współbieżny odśmiecacz pamięci o nazwie "Hades" zapewniający nawet 30-krotnie krótsze przerwy na urządzeniach 64-bitowych. W Facebooku zaobserwowaliśmy wzrost wydajności o 20%-50% w wymagających zadaniach CPU. Więcej o Hadesie znajdziesz tutaj.
ECMAScript Internationalization API (ECMA-402, czyli Intl) jest teraz wbudowany w Hermesa na Androida i domyślnie włączony, dodając tylko 57-62K narzutu na API (w porównaniu do 6MiB w JSC). Dzięki tej zmianie użytkownicy Hermesa nie potrzebują już polyfilli dla lokalizacji. Serdeczne podziękowania dla @mganandraj i partnerów z Microsoftu za doprowadzenie tej implementacji!
Hermes na iOS obsługuje teraz komputery Apple M1 i Mac Catalyst!
Optymalizacje pamięci obejmujące SMI (małe liczby całkowite) i kompresję wskaźników, które zmniejszyły stertę JS o 30%.
Zmiany w Function.prototype.toString, które naprawiły spadek wydajności spowodowany nieprawidłowym wykrywaniem funkcji oraz dodają obsługę wstrzykiwania kodu źródłowego.
Pełną listę zmian w Hermesie znajdziesz w dzienniku zmian.
Jeśli jeszcze tego nie zrobiłeś, włącz Hermesa w swojej aplikacji, aby skorzystać z tych nowych funkcji i ulepszeń!
W zeszłym roku Facebook zobowiązał się w ramach GAAD do poprawy dostępności w React Native. Wersja 0.65 prezentuje efekty tego zobowiązania i inne ulepszenia! Do znaczących zmian należą:
Możliwość definiowania wartości wysokiego kontrastu dla trybów jasnego i ciemnego w iOS. Szczegóły w dokumentacji.
Dodano interfejs getRecommendedTimeoutMillis na Androida. Udostępnia on preferowaną domyślną wartość limitu czasu ustawioną w opcjach dostępności Androida, przeznaczoną dla użytkowników potrzebujących dodatkowego czasu na zapoznanie się z interfejsem.
Ogólne poprawki zapewniające poprawne czytanie stanów UI (jak disabled czy unselected) przez TalkBack/VoiceOver.
Możesz śledzić lub współtworzyć rozwiązanie otwartych problemów z dostępnością!
W package.json wymagana jest teraz wersja 0.0.7 pakietu react-native-codegen jako devDependency.
JCenter został wycofany i jest tylko do odczytu. Usunęliśmy JCenter jako repozytorium Maven i zaktualizowaliśmy zależności do korzystania z MavenCentral i Jitpack.
Zaktualizowano OkHttp z wersji v3 do v4.9.1. Szczegółowe informacje o zmianach znajdziesz w artykule Upgrading to OkHttp 4.
Aktualizacja Flippera do wersji 0.93 z obsługą Xcode 12.5. Listę zmian znajdziesz w dzienniku zmian Flippera.
Obsługa Android Gradle Plugin 7
Apple Silicon wymaga obejścia w linkerze. Szczegóły znajdziesz w notatce @mikehardy.
To wydanie zawiera ponad 1100 commitów od 61 współtwórców. Dziękujemy wszystkim, którzy przyczynili się do tej wersji! Pełny dziennik zmian znajdziesz tutaj.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Dziś wydajemy React Native 0.64, który zawiera obsługę Hermes na iOS.
Hermes to otwartoźródłowy silnik JavaScript zoptymalizowany pod React Native. Poprawia wydajność poprzez zmniejszenie zużycia pamięci, redukcję rozmiaru pobieranych plików oraz skrócenie czasu do interaktywności (TTI).
Z przyjemnością ogłaszamy, że w tej wersji możesz używać Hermes również na iOS. Aby go włączyć, ustaw hermes_enabled na true w swoim Podfile i wykonaj pod install.
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => true
)
Pamiętaj, że obsługa Hermes na iOS jest wczesnym etapie rozwoju. Udostępniamy ją jako opcję, ponieważ wciąż prowadzimy testy wydajnościowe. Zachęcamy do przetestowania w swoich aplikacjach i podzielenia się doświadczeniami!
Inline Requires to opcja konfiguracyjna Metro, która przyspiesza uruchamianie aplikacji przez opóźnianie wykonania modułów JavaScript aż do momentu ich użycia.
Ta funkcja istniała od lat jako opcjonalna konfiguracja, wymieniona w dokumentacji dotyczącej wydajności. Teraz włączamy ją domyślnie w nowych aplikacjach, aby umożliwić tworzenie szybkich aplikacji bez dodatkowej konfiguracji.
Inline Requires to transformacja Babel, która przenosi importy modułów w miejsce ich użycia. Przykładowo, zamienia import na początku pliku na import w miejscu wykorzystania.
Przed:
import {MyFunction} from 'my-module';
const MyComponent = props => {
const result = MyFunction();
return <Text>{result}</Text>;
};
Po:
const MyComponent = props => {
const result = require('my-module').MyFunction();
return <Text>{result}</Text>;
};
Więcej informacji o Inline Requires znajdziesz w dokumentacji wydajności.
W zeszłym roku Facebook sponsorował stypendium Major League Hacking, wspierając rozwój React Native. Jessie Nguyen i Saphal Patro dodali możliwość wizualizacji działania aplikacji w zakładce Performance Chrome DevTools podczas korzystania z Hermes.
Szczegóły znajdziesz na nowej stronie dokumentacji.
Dodaliśmy obsługę Proxy w Hermes, co umożliwia kompatybilność z popularnymi projektami jak react-native-firebase i mobx. Jeśli ich używasz, możesz teraz migrować do Hermes.
Planujemy ustawienie Hermes jako domyślnego silnika JavaScript w nadchodzących wydaniach, dlatego usuwamy przeszkody w jego adopcji. Problemy zgłaszaj w repozytorium Hermes na GitHubie.
React 17 nie wprowadza nowych funkcji ani istotnych zmian. Dla React Native kluczowa jest nowa transformacja JSX, która eliminuje konieczność importowania Reacta w plikach używających JSX.
Więcej o React 17 przeczytasz na blogu Reacta.
Usunięto wsparcie dla Android API 16-20. Aplikacja Facebooka konsekwentnie wycofuje wsparcie dla mało używanych wersji Androida. Jako że Facebook nie wspiera już tych wersji i stanowi główne środowisko testowe React Native, React Native również wycofuje wsparcie.
Xcode 12 i CocoaPods 1.10 są wymagane
Minimalna obsługiwana wersja Node została podniesiona z 10 do 12
Flipper zaktualizowany do wersji 0.75.1
Dziękujemy setkom współtwórców, którzy pomogli w stworzeniu wersji 0.64! Log zmian 0.64 zawiera wszystkie modyfikacje wprowadzone w tym wydaniu.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Dziś wydajemy React Native 0.63 z domyślnie włączonym LogBox.
Często słyszeliśmy od społeczności, że błędy i ostrzeżenia w React Native są trudne do debugowania. Aby rozwiązać te problemy, przejrzeliśmy cały system błędów, ostrzeżeń i logów w React Native i przeprojektowaliśmy go od podstaw.
LogBox to całkowicie przeprojektowane doświadczenie związane z redbox, yellowbox i logowaniem w React Native. W wersji 0.62 wprowadziliśmy LogBox jako opcję do włączenia. W tym wydaniu LogBox staje się domyślnym doświadczeniem w całym React Native.
LogBox rozwiązuje problemy związane z nadmierną szczegółowością, złym formatowaniem lub brakiem możliwości działania na błędach i ostrzeżeniach, skupiając się na trzech głównych celach:
Zwięzłość: Logi powinny zawierać minimalną ilość informacji niezbędną do debugowania problemu.
Formatowanie: Logi powinny być sformatowane tak, aby można było szybko znaleźć potrzebne informacje.
Możliwość działania: Logi powinny umożliwiać podjęcie działań, aby można było naprawić problem i przejść dalej.
Aby osiągnąć te cele, LogBox zawiera:
Powiadomienia logów: Przeprojektowaliśmy powiadomienia ostrzegawcze i dodaliśmy obsługę błędów, dzięki czemu wszystkie komunikaty console.warn i console.log pojawiają się jako powiadomienia zamiast zasłaniać aplikację.
Ramki kodu: Każdy błąd i ostrzeżenie zawiera teraz ramkę kodu pokazującą źródłowy kod logu bezpośrednio w aplikacji, co pozwala szybko zidentyfikować źródło problemu.
Stosy komponentów: Wszystkie stosy komponentów są teraz wydzielone z komunikatów o błędach i umieszczone w osobnej sekcji z widocznymi trzema najważniejszymi klatkami. Daje to spójne miejsce oczekiwania informacji o klatkach stosu bez zaśmiecania komunikatu logu.
Zwinięte klatki stosu: Domyślnie zwijamy teraz klatki stosu wywołań niezwiązane z kodem aplikacji, aby można było szybko zobaczyć problem w aplikacji bez przeglądania wewnętrznych elementów React Native.
Formatowanie błędów składni: Ulepszyliśmy formatowanie błędów składni i dodaliśmy ramki kodu z kolorowaniem składni, dzięki czemu można zobaczyć źródło błędu, naprawić go i kontynuować kodowanie bez przeszkód ze strony React Native.
Wszystkie te funkcje zostały opakowane w ulepszony projekt wizualny, spójny dla błędów i ostrzeżeń, umożliwiający przeglądanie wszystkich logów w jednym przyjaznym interfejsie.
W związku z tą zmianą wycofujemy również YellowBox na rzecz API LogBox:
LogBox.ignoreLogs(): Ta funkcja zastępuje YellowBox.ignoreLogs([]) jako sposób wyciszania logów pasujących do podanych ciągów lub wyrażeń regularnych.
LogBox.ignoreAllLogs(): Ta funkcja zastępuje console.disableYellowBox jako sposób wyłączania powiadomień o błędach lub ostrzeżeniach. Uwaga: wyłącza tylko powiadomienia, nieprzechwycone błędy nadal otworzą pełnoekranowy LogBox.
W wersji 0.63 będziemy ostrzegać przy użyciu tych przestarzałych modułów lub metod. Prosimy o aktualizację miejsc wywołań tych API przed ich usunięciem w wersji 0.64.
Więcej informacji o LogBox i debugowaniu React Native znajdziesz w dokumentacji tutaj.
React Native został stworzony, aby umożliwić aplikacjom spełnianie oczekiwań użytkowników wobec platformy. Obejmuje to unikanie "sygnatur" – drobnych elementów zdradzających, że aplikacja powstała w React Native. Jednym z głównych źródeł takich sygnatur były komponenty dotykowe: Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback i TouchableBounce. Te komponenty sprawiają, że aplikacja jest interaktywna, zapewniając wizualną odpowiedź na działania użytkownika. Jednakże zawierają wbudowane style i efekty niedopasowane do interakcji platformowych, co pozwala użytkownikom rozpoznać aplikacje napisane w React Native.
Co więcej, w miarę rozwoju React Native i wzrostu wymagań co do jakości aplikacji, te komponenty nie ewoluowały. React Native obsługuje już platformy takie jak Web, Desktop i TV, ale brakowało wsparcia dla dodatkowych trybów wprowadzania danych. React Native musi zapewniać wysokiej jakości interakcje na wszystkich platformach.
Aby rozwiązać te problemy, wprowadzamy nowy podstawowy komponent Pressable. Może on wykrywać różne rodzaje interakcji. API zaprojektowano tak, aby zapewniać bezpośredni dostęp do bieżącego stanu interakcji bez konieczności ręcznego zarządzania stanem w komponencie nadrzędnym. Umożliwia też platformom rozszerzenie funkcjonalności o efekty hover, blur, focus i inne. Oczekujemy, że większość osób będzie tworzyć i udostępniać komponenty oparte na Pressable zamiast polegać na domyślnych rozwiązaniach takich jak TouchableOpacity.
import {Pressable, Text} from 'react-native';
<Pressable
onPress={() => {
console.log('pressed');
}}
style={({pressed}) => ({
backgroundColor: pressed ? 'lightskyblue' : 'white',
})}>
<Text style={styles.text}>Press Me!</Text>
</Pressable>;
A simple example of a Pressable component in action
Więcej informacji znajdziesz w dokumentacji.
Każda natywna platforma ma koncepcję kolorów systemowych. Kolory te automatycznie dostosowują się do ustawień systemowych takich jak tryb Jasny/Ciemny, ustawień dostępności jak Wysoki Kontrast, a nawet kontekstu w aplikacji takich jak cechy zawierającego widoku lub okna.
Choć niektóre z tych ustawień można wykryć za pomocą API Appearance i/lub AccessibilityInfo i odpowiednio ustawić style, takie rozwiązania są nie tylko kosztowne w implementacji, ale też tylko przybliżają wygląd natywnych kolorów. Te niespójności są szczególnie widoczne w aplikacjach hybrydowych, gdzie elementy React Native współistnieją z natywnymi.
React Native oferuje teraz gotowe rozwiązanie do używania tych kolorów systemowych. PlatformColor() to nowe API, które można używać jak każdego innego koloru w React Native.
Na przykład w iOS system udostępnia kolor labelColor. Można go użyć w React Native z PlatformColor w ten sposób:
import {Text, PlatformColor} from 'react-native';
<Text style={{color: PlatformColor('labelColor')}}>
This is a label
</Text>;
Sets the color of the Text component to labelColor as defined by iOS.
Z kolei Android udostępnia kolory jak colorButtonNormal. Ten kolor użyjemy w React Native jako:
import {View, Text, PlatformColor} from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal'),
}}>
<Text>This is colored like a button!</Text>
</View>;
Sets the background color of the View component to colorButtonNormal as defined by Android.
Więcej o PlatformColor przeczytasz w dokumentacji. Możesz też zobaczyć przykłady kodu w RNTester.
DynamicColorIOS to API dostępne tylko na iOS, pozwalające definiować kolory dla trybów jasnego i ciemnego. Podobnie jak PlatformColor, można go używać wszędzie tam, gdzie stosuje się kolory. DynamicColorIOS wykorzystuje pod spodem iOS-owe colorWithDynamicProvider.
import {Text, DynamicColorIOS} from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue',
});
<Text style={{color: customDynamicTextColor}}>
This color changes automatically based on the system theme!
</Text>;
Changes the text color based on the system theme
Więcej o DynamicColorIOS znajdziesz w dokumentacji.
Po ponad czterech latach od premiery kończymy wsparcie dla iOS 9. Ta zmiana pozwoli nam działać szybciej, redukując liczbę kontroli kompatybilności w kodzie natywnym sprawdzających wsparcie funkcji w danej wersji iOS. Przy udziale rynkowym wynoszącym 1% nie powinno to znacząco wpłynąć na użytkowników.
Jednocześnie wycofujemy wsparcie dla Node 8. Jego cykl wsparcia LTS wygasł w grudniu 2019. Obecną wersją LTS jest Node 10 i to właśnie ją teraz obsługujemy. Jeśli nadal używasz Node 8 do tworzenia aplikacji React Native, zachęcamy do aktualizacji, aby otrzymywać wszystkie najnowsze poprawki bezpieczeństwa i aktualizacje.
Obsługa renderowania <View /> w <Text /> bez określania rozmiaru: Teraz możesz renderować dowolny <View /> wewnątrz komponentu <Text /> bez jawnego ustawiania szerokości i wysokości, co nie zawsze było możliwe. We wcześniejszych wersjach React Native powodowało to pojawienie się RedBox.
Zmiana LaunchScreen w iOS z xib na storyboard: Od 30 kwietnia 2020 wszystkie aplikacje przesyłane do App Store muszą używać storyboarda z Xcode do ekranu startowego, a aplikacje na iPhone'a muszą obsługiwać wszystkie rozmiary ekranów. Ta zmiana dostosowuje domyślny szablon React Native do tych wymagań.
Dziękujemy setkom współtwórców, którzy pomogli w stworzeniu wersji 0.63!
Specjalne podziękowania dla Ricka Hanlona za przygotowanie sekcji o LogBox oraz Eli White za opisanie części dotyczącej Pressable w tym artykule.
Pełną listę zmian znajdziesz w dzienniku zmian wersji 0.63.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Dziś wydajemy React Native w wersji 0.62, która domyślnie zawiera obsługę Flippera.
To wydanie następuje w trakcie globalnej pandemii. Publikujemy tę wersję dziś, aby docenić pracę setek współtwórców, którzy umożliwili to wydanie, i zapobiec zbytniemu odsunięciu się od gałęzi głównej. Prosimy o wyrozumiałość dla ograniczonej dostępności współtwórców do pomocy przy problemach i rozważenie przełożenia aktualizacji, jeśli to konieczne.
Flipper to narzędzie dla deweloperów do debugowania aplikacji mobilnych. Cieszy się popularnością w społecznościach Androida i iOS, a w tym wydaniu domyślnie włączyliśmy jego obsługę dla nowych i istniejących aplikacji React Native.
Flipper oferuje następujące funkcje od ręki:
Metro Actions: Przeładuj aplikację i wywołaj menu deweloperskie bezpośrednio z paska narzędzi.
Crash Reporter: Przeglądaj raporty o awariach z urządzeń Android i iOS.
React DevTools: Korzystaj z najnowszej wersji React DevTools obok innych narzędzi.
Network Inspector: Przeglądaj wszystkie żądania sieciowe wysyłane przez aplikacje na urządzeniu.
Metro and Device Logs: Przeglądaj, wyszukuj i filtruj logi z Metro oraz urządzenia.
Native Layout Inspector: Przeglądaj i edytuj natywny układ generowany przez renderer React Native.
Database and Preference Inspectors: Przeglądaj i edytuj bazy danych oraz preferencje urządzenia.
Dodatkowo, ponieważ Flipper to rozszerzalna platforma, zapewnia marketplace pobierający wtyczki z NPM, co umożliwia publikowanie i instalację niestandardowych wtyczek dopasowanych do Twoich workflow. Zobacz dostępne wtyczki tutaj.
Więcej informacji znajdziesz w dokumentacji Flippera.
Dodaliśmy nowy moduł Appearance zapewniający dostęp do preferencji wyglądu użytkownika, takich jak preferowany schemat kolorów (jasny lub ciemny).
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark color scheme
}
Dodaliśmy także hook do subskrybowania aktualizacji stanu preferencji użytkownika:
import {Text, useColorScheme} from 'react-native';
const MyComponent = () => {
const colorScheme = useColorScheme();
return <Text>useColorScheme(): {colorScheme}</Text>;
};
Więcej informacji znajdziesz w dokumentacji Appearance i useColorScheme.
W ramach naszej inicjatywy Lean Core i aby dostosować Apple TV do innych platform takich jak React Native Windows i React Native macOS, zaczęliśmy usuwać kod specyficzny dla Apple TV z rdzenia.
Od teraz obsługa Apple TV w React Native będzie utrzymywana w repozytorium react-native-community/react-native-tvos wraz z odpowiadającym pakietem NPM react-native-tvos. To pełny fork głównego repozytorium zawierający wyłącznie zmiany potrzebne do obsługi Apple TV.
Wydania react-native-tvos będą oparte na publicznych wydaniach React Native. Dla wydania 0.62 react-native prosimy o aktualizację projektów Apple TV do wersji react-native-tvos 0.62.
Gdy wydano wersję 0.61, społeczność wprowadziła nowe narzędzie Upgrade Helper wspierające programistów w aktualizowaniu React Native. Upgrade Helper pokazuje różnice między twoją obecną wersją a docelową, co pozwala zobaczyć zmiany potrzebne do przeprowadzenia aktualizacji.
Nawet z tym narzędziem podczas aktualizacji mogą pojawić się problemy. Dlatego dziś wprowadzamy dedykowane wsparcie ogłaszając Upgrade-Support. To tracker GitHub, gdzie użytkownicy mogą zgłaszać problemy związane z aktualizacją projektów, aby otrzymać pomoc od społeczności.
Stale pracujemy nad poprawą procesu aktualizacji i mamy nadzieję, że te narzędzia zapewnią użytkownikom wsparcie w nietypowych przypadkach, których jeszcze nie przewidzieliśmy.
LogBox: Nowe środowisko błędów i ostrzeżeń w LogBox dodajemy jako opcję do włączenia; by je aktywować, dodaj require('react-native').unstable_enableLogBox() do pliku index.js.
React DevTools v4: Ta zmiana obejmuje aktualizację do najnowszych React DevTools, które oferują znaczną poprawę wydajności, lepszą nawigację i pełne wsparcie dla React Hooks.
Ulepszenia dostępności: Wprowadziliśmy poprawki w dostępności, w tym dodanie accessibilityValue, brakujących właściwości w Touchables, onSlidingComplete zdarzeń dostępności oraz zmianę domyślnej roli komponentu Switch z "button" na "switch".
Usunięcie PropTypes: Usuwamy propTypes z podstawowych komponentów, aby zmniejszyć wpływ React Native core na rozmiar aplikacji i promować statyczne systemy typów sprawdzane podczas kompilacji zamiast w czasie wykonania.
Usunięcie accessibilityStates: Usunęliśmy przestarzałą właściwość accessibilityStates na rzecz nowej właściwości accessibilityState, która semantycznie bogatszym sposobem przekazywania informacji o stanie komponentu do usług dostępności.
Zmiany w TextInput: Usunęliśmy onTextInput z TextInput, ponieważ jest rzadko używane, niezgodne ze standardem W3C i trudne do implementacji w Fabric. Usunęliśmy także nieudokumentowaną właściwość inputView oraz selectionState.
AccessibilityInfo.fetch było już przestarzałe, ale w tej wersji dodaliśmy ostrzeżenie.
Ustawienie useNativeDriver jest teraz wymagane, aby umożliwić zmianę domyślnej wartości w przyszłości.
Referencja (ref) komponentu Animated jest teraz jego wewnętrznym komponentem, a getNode zostało oznaczone jako przestarzałe.
Dziękujemy setkom współtwórców, którzy pomogli stworzyć wersję 0.62!
Aby zobaczyć wszystkie aktualizacje, zajrzyj do changeloga dla wersji 0.62.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Z radością ogłaszamy wydanie React Native 0.61, które wprowadza nowe podejście do przeładowywania aplikacji - funkcję Fast Refresh.
Gdy zapytaliśmy społeczność React Native o najczęstsze problemy, jedną z głównych odpowiedzi była niesprawność funkcji „hot reloading”. Nie działała niezawodnie dla komponentów funkcyjnych, często nie aktualizowała ekranu i nie radziła sobie z literówkami czy błędami. Dowiedzieliśmy się, że większość osób ją wyłączała z powodu jej niestabilności.
W React Native 0.61 łączymy istniejące funkcje „live reloading” (przeładowanie po zapisie) i „hot reloading” w jedną nową funkcję o nazwie „Fast Refresh”. Fast Refresh został zbudowany od zera z uwzględnieniem następujących zasad:
Fast Refresh w pełni obsługuje nowoczesny React, w tym komponenty funkcyjne i Hooks.
Fast Refresh elegancko radzi sobie z literówkami i innymi błędami, przełączając się w razie potrzeby na pełne przeładowanie.
Fast Refresh nie wykonuje inwazyjnych transformacji kodu, dzięki czemu jest na tyle niezawodny, że może być domyślnie włączony.
Aby zobaczyć Fast Refresh w akcji, obejrzyj to wideo:
Wypróbuj i daj nam znać, co sądzisz! Jeśli wolisz, możesz wyłączyć tę funkcję w menu deweloperskim (Cmd+D na iOS, Cmd+M lub Ctrl+M na Androidzie). Przełączanie jest natychmiastowe, więc możesz to zrobić w dowolnym momencie.
Oto kilka wskazówek dotyczących Fast Refresh:
Domyślnie Fast Refresh zachowuje lokalny stan Reacta w komponentach funkcyjnych (i Hookach!).
Jeśli potrzebujesz resetować stan Reacta przy każdej edycji, dodaj specjalny komentarz // @refresh reset w pliku z danym komponentem.
Fast Refresh zawsze remontuje komponenty klasowe bez zachowywania stanu. Gwarantuje to niezawodne działanie.
Wszyscy popełniamy błędy w kodzie! Fast Refresh automatycznie ponawia renderowanie po zapisaniu pliku. Po naprawieniu błędu składniowego lub wykonawczego nie musisz ręcznie przeładowywać aplikacji.
Dodawanie console.log lub instrukcji debugger podczas edycji to skuteczna technika debugowania.
Prosimy zgłaszać wszelkie problemy z Fast Refresh na GitHubie - zajmiemy się nimi.
Naprawiono obsługę use_frameworks! w CocoaPods. W wersji 0.60 wprowadziliśmy domyślną integrację z CocoaPods. Niestety, spowodowało to problemy w projektach używających use_frameworks!. Wersja 0.61 naprawia ten problem, ułatwiając integrację React Native z projektami iOS wymagającymi dynamicznych frameworków.
Dodano Hook useWindowDimensions. Ten nowy Hook automatycznie dostarcza i subskrybuje aktualizacje wymiarów ekranu, zastępując w większości przypadków API Dimensions.
Zaktualizowano Reacta do wersji 16.9. Wersja ta oznacza przestarzałe nazwy metod cyklu życia z prefiksem UNSAFE_, zawiera ulepszenia act i inne zmiany. Szczegóły oraz automatyczny skrypt migracyjny znajdziesz w wpisie o React 16.9.
Dziękujemy wszystkim współtwórcom, którzy pomogli w przygotowaniu wersji 0.61!
Pełną listę zmian znajdziesz w dzienniku zmian dla wersji 0.61.
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Po miesiącach ciężkiej pracy setek współtwórców, zespół React Native Core z dumą ogłasza wydanie wersji 0.60. Ta wersja obejmuje znaczące migracje zarówno dla platform Android, jak i iOS, a także rozwiązano wiele problemów. W tym wpisie na blogu przedstawiamy najważniejsze zmiane w wydaniu. Jak zawsze, szczegółowe informacje znajdziesz w dzienniku zmian. Dziękujemy wszystkim współtwórcom za pomoc w osiągnięciu tego kamienia milowego!
Wprowadzono wiele ulepszeń do interfejsów API dostępności, takich jak announceForAccessibility, a także ulepszenia w zakresie ról, obsługi akcji, flag i innych. Dostępność to złożona dziedzina, ale mamy nadzieję, że te ulepszenia ułatwią bycie specjalistą A11Y. Koniecznie sprawdź Aktualizację React Native Open Source z czerwca 2019 po więcej szczegółów na temat tych zmian.
Ekran startowy React Native został odświeżony! Dziękujemy licznym współtwórcom, którzy pomogli stworzyć nowy interfejs. To nowe "Hello World" przywita użytkowników w ekosystemie w bardziej przyjazny i angażujący sposób.
AndroidX to duży krok naprzód w ekosystemie Androida, a stare artefakty biblioteki wsparcia są wycofywane. W wersji 0.60 React Native został zmigrowany do AndroidX. Jest to zmiana łamiąca kompatybilność wsteczną, więc twój natywny kod i zależności również będą musiały zostać zmigrowane.
Dzięki tej zmianie aplikacje React Native będą musiały zacząć używać samego AndroidX. Nie można używać ich jednocześnie w jednej aplikacji, więc cały kod aplikacji i kod zależności musi używać jednego lub drugiego.
Chociaż twój własny natywny kod będziesz musiał zmigrować samodzielnie, @mikehardy, @cawfree oraz @m4tt72 stworzyli sprytne narzędzie o nazwie "jetifier" do załatania twojego node_modules. Twórcy bibliotek będą musieli dokonać aktualizacji, ale to narzędzie zapewnia tymczasowe rozwiązanie, dając im czas na wydanie wersji dla AndroidX. Jeśli więc napotkasz błędy związane z migracją do AndroidX, wypróbuj je.
CocoaPods stały się częścią projektu iOS w React Native. Jeśli jeszcze tego nie robiłeś, od teraz pamiętaj o otwieraniu kodu platformy iOS za pomocą pliku xcworkspace (pro tip: spróbuj xed ios z głównego katalogu projektu). Dodatkowo, podspec dla pakietów wewnętrznych zostały zmienione, aby były kompatybilne z projektami Xcode, co ułatwi rozwiązywanie problemów i debugowanie. Przygotuj się na wprowadzenie prostych zmian w swoim Podfile podczas aktualizacji do wersji 0.60, aby skorzystać z tego ekscytującego udoskonalenia. Pamiętaj, że znamy problem kompatybilności z use_frameworks! i śledzimy issue z obejściami i planowaną poprawką.
WebView i NetInfo zostały wcześniej przeniesione do osobnych repozytoriów, a w wersji 0.60 zakończyliśmy ich migrację z głównego repozytorium React Native. Dodatkowo, w odpowiedzi na uwagi społeczności dotyczące nowych zasad App Store, Geolocation również został wyodrębniony. Jeśli jeszcze tego nie zrobiłeś, dokończ migrację, dodając zależności do react-native-webview, @react-native-community/netinfo oraz @react-native-community/geolocation. Jeśli wolisz zautomatyzowane rozwiązanie, rozważ użycie rn-upgrade-deprecated-modules. Opiekunowie dokonali ponad 100 commitów w tych repozytoriach od czasu wyodrębnienia – cieszymy się z takiego wsparcia społeczności!
Zespół pracujący nad React Native CLI wprowadził znaczące ulepszenia w linkowaniu modułów natywnych, nazwane autolinkingiem! W większości przypadków nie będziesz już potrzebował komendy react-native link. Jednocześnie zespół gruntownie przebudował cały proces linkowania. Pamiętaj o użyciu react-native unlink dla istniejących zależności, jak opisano w powyższej dokumentacji.
@lucasbento, @pvinis, @kelset i @watadarkstar stworzyli świetne narzędzie o nazwie Upgrade Helper, które upraszcza proces aktualizacji. Pomaga użytkownikom React Native z brownfield aplikacjami lub złożonymi dostosowaniami w przejrzeniu zmian między wersjami. Sprawdź zaktualizowaną dokumentację upgrade'ów i wypróbuj narzędzie przy swojej ścieżce migracji!
Zmiany związane z AndroidX niemal na pewno będą wymagać aktualizacji Twojej biblioteki, więc koniecznie dodaj wkrótce odpowiednie wsparcie. Jeśli nie możesz jeszcze przeprowadzić aktualizacji, rozważ przetestowanie swojej biblioteki z jetifierem, aby upewnić się, że użytkownicy będą mogli ją załatać podczas budowania.
Przejrzyj dokumentację autolinkingu, aby zaktualizować swoje konfiguracje i plik readme. W zależności od tego, jak Twoja biblioteka była wcześniej zintegrowana, możesz potrzebować dodatkowych zmian. Sprawdź przewodnik po zależnościach w CLI, aby dowiedzieć się, jak zdefiniować interfejs zależności.
Choć to tylko najważniejsze zmiany, które odnotowaliśmy, czeka nas wiele innych ekscytujących nowości. Aby zobaczyć wszystkie aktualizacje, zajrzyj do changeloga. Jak zawsze, śledźcie dalsze wieści. Tymczasem życzymy miłego korzystania z wersji 0.60!
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Witamy w wydaniu React Native 0.59! To kolejna duża aktualizacja zawierająca 644 commity od 88 współtwórców. Wkład przyjmuje też inne formy, więc dziękujemy za zgłaszanie problemów, budowanie społeczności i edukowanie o React Native. Ten miesiąc przynosi długo wyczekiwane zmiany, mamy nadzieję że Wam się spodobają.
React Hooks są częścią tego wydania, umożliwiając ponowne wykorzystanie logiki stanowej między komponentami. Jest wiele szumu wokół hooków, ale jeśli jeszcze nie słyszeliście, zerknijcie na te świetne materiały:
- Wprowadzenie do Hooks wyjaśnia dlaczego dodajemy Hooki do Reacta.
- Przegląd Hooków to szybkie omówienie wbudowanych Hooków.
- Tworzenie własnych Hooków demonstruje ponowne użycie kodu z niestandardowymi Hookami.
- Zrozumienie React Hooks bada nowe możliwości jakie otwierają Hooki.
- useHooks.com prezentuje społecznościowe przepisy i dema Hooków.
Wypróbujcie je w swoich aplikacjach. Mamy nadzieję, że ponowne wykorzystanie kodu będzie dla Was tak ekscytujące jak dla nas.
React Native używa JSC (JavaScriptCore) do uruchamiania aplikacji. JSC na Androidzie był kilka lat starszy, przez co brakowało wsparcia dla nowoczesnych funkcji JavaScriptu. Co gorsza, wypadał gorzej pod względem wydajności w porównaniu do nowoczesnego JSC na iOS. To wydanie zmienia tę sytuację.
Dzięki wspaniałej pracy @DanielZlotin, @dulmandakh, @gengjiawen, @kmagiera i @kudo JSC nadgonił zaległości. To przynosi wsparcie 64-bitowe, obsługę nowoczesnego JavaScriptu i znaczącą poprawę wydajności. Uznanie za usprawnienie procesu utrzymania, dzięki czemu łatwiej będzie korzystać z przyszłych ulepszeń WebKita. Dziękujemy Software Mansion i Expo za umożliwienie tej pracy.
Chcemy pomóc w tworzeniu wydajnych aplikacji React Native domyślnie, przenosząc optymalizacje z Facebooka do społeczności. Zasoby ładują się na żądanie zamiast spowalniać uruchamianie. Ta funkcja nazywa się "inline requires" i pozwala Metro identyfikować komponenty do leniwego ładowania. Największą poprawę zauważą aplikacje z rozbudowaną architekturą komponentów.
Potrzebujemy informacji od społeczności zanim włączymy to domyślnie. Po aktualizacji do 0.59 pojawi się nowy plik metro.config.js; zmieńcie opcje na true i podzielcie się opinią! Przeczytajcie więcej o inline requires w dokumentacji wydajności aby zmierzyć wyniki swojej aplikacji.
React Native to duży i złożony projekt o skomplikowanym repozytorium. Utrudnia to podejście współtwórcom, testowanie i powoduje nadmiarowe zależności. Lean Core to nasza inicjatywa rozwiązania tych problemów poprzez przenoszenie kodu do osobnych bibliotek. Poprzednie wydania zawierały pierwsze kroki, ale czas na poważne działania.
Możecie zauważyć, że dodatkowe komponenty są teraz oficjalnie przestarzałe. To dobra wiadomość, ponieważ funkcje te mają teraz aktywnych opiekunów. Zwracajcie uwagę na ostrzeżenia i migrujcie do nowych bibliotek, ponieważ te funkcje zostaną usunięte w przyszłych wydaniach. Poniższa tabela wskazuje komponent, jego status i miejsce migracji.
| Component | Deprecated? | New home |
|---|---|---|
| AsyncStorage | 0.59 | @react-native-community/react-native-async-storage |
| ImageStore | 0.59 | expo-file-system or react-native-fs |
| MaskedViewIOS | 0.59 | @react-native-community/react-native-masked-view |
| NetInfo | 0.59 | @react-native-community/react-native-netinfo |
| Slider | 0.59 | @react-native-community/react-native-slider |
| ViewPagerAndroid | 0.59 | @react-native-community/react-native-viewpager |
W nadchodzących miesiącach więcej komponentów podąży tą ścieżką ku szczuplejszemu rdzeniowi. Poszukujemy pomocy - dołączcie do omówienia Lean Core.
Narzędzia wiersza poleceń React Native to punkt wejścia dla deweloperów, ale miały długotrwałe problemy i brak oficjalnego wsparcia. CLI zostało przeniesione do nowego repozytorium, a dedykowana grupa opiekunów już wprowadziła ekscytujące ulepszenia.
Logi są teraz lepiej formatowane. Polecenia uruchamiają się niemal natychmiast - różnica jest od razu widoczna:
Wysłuchaliśmy Waszych uwag dotyczących procesu aktualizacji React Native i pracujemy nad poprawą doświadczeń w przyszłych wydaniach. Do aktualizacji na 0.59 polecamy użyć rn-diff-purge aby sprawdzić zmiany między Waszą wersją a 0.59, następnie ręcznie je zastosować. Po aktualizacji projektu do 0.59, będziecie mogli użyć ulepszonego polecenia react-native upgrade (bazującego na rn-diff-purge!) do aktualizacji na 0.60 i nowsze wersje.
Wsparcie Androida w 0.59 zostało oczyszczone zgodnie z najnowszymi zaleceniami Google, co może powodować problemy w istniejących aplikacjach. Problem może objawiać się awarią podczas działania i komunikatem "You need to use a Theme.AppCompat theme (or descendant) with this activity". Zalecamy aktualizację pliku AndroidManifest.xml, upewniając się że wartość android:theme to motyw AppCompat (np. @style/Theme.AppCompat.Light.NoActionBar).
Polecenie react-native-git-upgrade zostało usunięte w 0.59 na rzecz ulepszonego react-native upgrade.
Wielu nowych współtwórców pomogło w generowaniu kodu natywnego z typów Flow i rozwiązywaniu ostrzeżeń Xcode - to świetny sposób by nauczyć się działania React Native i przyczynić do wspólnego dobra. Dziękujemy! Wypatrujcie podobnych zagadnień w przyszłości.
To tylko niektóre z najważniejszych zmian, ale czeka Was znacznie więcej atrakcji. Pełną listę aktualizacji znajdziecie w dzienniku zmian. Wydanie 0.59 to ogromny krok – nie możemy się doczekać, aż je przetestujecie.
W ciągu najbliższych miesięcy przygotowujemy jeszcze więcej ulepszeń. Śledźcie nasze komunikaty!