Przejdź do treści głównej

53 posty z tagiem "announcement"

Zobacz wszystkie tagi

Aktualizacja dokumentacji React Native

· 4 minuty czytania
Rachel Nabors
Inżynier Dokumentacji w Facebooku
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

W zeszłym roku przeprowadziliśmy wywiady z użytkownikami i rozesłaliśmy ankietę, aby dowiedzieć się więcej o tym, jak i kiedy ludzie korzystają z dokumentacji React Native. Dzięki danym i wskazówkom zebranym z 24 wywiadów oraz ponad 3000 odpowiedzi na ankietę, mogliśmy pracować nad ulepszeniem dokumentacji React Native i z radością dzielimy się dzisiaj postępami:

Wielkie dzięki dla wszystkich, którzy wzięli udział w wywiadach, ankiecie i naszych pracach nad dokumentacją! Wasza współpraca to umożliwia.

Zasady zespołu React Native

· 4 minuty czytania
Eli White
Eli White
Software Engineer @ Meta
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Zespół React Native w Facebooku kieruje się zasadami, które pomagają nam ustalać priorytety w rozwoju frameworka. Zasady te odzwierciedlają specyfikę naszego zespołu i niekoniecznie reprezentują wszystkich uczestników ekosystemu React Native. Udostępniamy je, by zwiększyć transparentność naszych motywacji, procesów decyzyjnych i kierunków rozwoju.

Natywne Doświadczenie

Naszym najwyższym priorytetem w React Native jest spełnienie oczekiwań użytkowników wobec każdej platformy. Dlatego React Native renderuje natywne komponenty platformy. Przedkładamy natywny wygląd i zachowanie nad spójność międzyplatformową.

Przykładowo, komponent TextInput w React Native renderuje się jako UITextField na iOS. Dzięki temu integracja z menedżerami haseł i sterowaniem klawiaturą działa od ręki. Używając natywnych komponentów, aplikacje React Native automatycznie dostosowują się do zmian w designie i zachowaniu w nowych wersjach Androida i iOS.

Aby dorównać natywnym aplikacjom, musimy też zapewnić im równą wydajność. To właśnie tutaj skupiamy nasze najbardziej ambitne wysiłki. Przykładowo, Facebook stworzył Hermes - nowy silnik JavaScript od podstaw dla React Native na Androidzie. Hermes znacząco skraca czas uruchamiania aplikacji. Pracujemy też nad głębokimi zmianami architektonicznymi optymalizującymi model wątków i ułatwiającymi integrację z natywnym kodem.

Skala Przemysłowa

Setki ekranów w aplikacji Facebooka wykorzystuje React Native. Aplikację tę używa miliardy osób na ogromnej gamie urządzeń. Dlatego inwestujemy w rozwiązywanie najbardziej złożonych problemów na wielką skalę.

Wdrażając React Native w naszych aplikacjach, identyfikujemy problemy niewidoczne w mniejszej skali. Przykładowo, Facebook skupia się na optymalizacji wydajności na szerokim spektrum urządzeń – od najnowszych iPhone'ów po starsze generacje Androida. Te priorytety kształtują nasze projekty architektoniczne jak Hermes, Fabric i TurboModules.

Udowodniliśmy, że React Native skaluje się też w ogromnych organizacjach. Gdy setki programistów pracują nad jedną aplikacją, stopniowe wdrażanie jest koniecznością. Dlatego zapewniliśmy możliwość adoptowania React Native ekran po ekranie. Wkrótce idziemy o krok dalej – umożliwimy migrację pojedynczych widoków w istniejących natywnych ekranach.

Skupienie na skali przemysłowej oznacza, że nasz zespół nie zajmuje się wieloma innymi obszarami. Przykładowo, nie prowadzimy aktywnej promocji React Native w branży. Nie tworzymy też rozwiązań dla problemów, których nie obserwujemy w dużej skali. Dzięki licznym partnerom i współtwórcom te ważne dla społeczności obszary są jednak rozwijane.

Prędkość Programowania

Doskonałe doświadczenia użytkownika tworzy się iteracyjnie. Efekt zmian w kodzie powinien być widoczny w działającej aplikacji w kilka sekund. Architektura React Native zapewnia niemal natychmiastową informację zwrotną podczas rozwoju.

Zespoły często zgłaszają, że adoptowanie React Native znacząco przyspiesza ich pracę. Natychmiastowy podgląd zmian ułatwia eksperymentowanie z koncepcjami i dopracowywanie szczegółów bez przerywania kodowania przy każdej modyfikacji. Wprowadzając zmiany w React Native, dbamy o zachowanie tej jakości doświadczeń deweloperskich.

Natychmiastowy podgląd to nie jedyna zaleta. Zespoły wykorzystują rosnący ekosystem wysokiej jakości pakietów open source. Mogą też współdzielić logikę biznesową między Androidem, iOS i webem. To pomaga szybciej wydawać aktualizacje i redukować bariery między zespołami platformowymi.

Wszystkie Platformy

Gdy prezentowaliśmy React Native w 2014 roku, towarzyszyło mu motto „Naucz się raz, pisz wszędzie” – i mamy na myśli dosłownie wszędzie. Deweloperzy powinni móc dotrzeć do jak najszerszego grona odbiorców bez ograniczeń modelu urządzenia czy systemu operacyjnego.

React Native obsługuje bardzo różne platformy, w tym mobilne, desktopowe, internetowe, telewizyjne, VR, konsole do gier i inne. Chcemy umożliwić bogate doświadczenia na każdej platformie, zamiast wymagać od developerów budowania pod najmniejszy wspólny mianownik. Aby to osiągnąć, skupiamy się na wspieraniu unikalnych funkcji każdej platformy. Obejmuje to różne mechanizmy wprowadzania danych (np. dotyk, pióro, mysz) aż po fundamentalnie różne doświadczenia użytkownika, takie jak środowiska 3D w VR.

Ta zasada wpłynęła na naszą decyzję o implementacji nowej architektury rdzenia React Native w wieloplatformowym C++ w celu zapewnienia spójności między platformami. Usprawniamy również publiczny interfejs przeznaczony dla innych opiekunów platform, takich jak Microsoft z Windows i macOS. Dążymy do umożliwienia obsługi React Native na dowolnych platformach.

Deklaratywny interfejs użytkownika

Nie wierzymy w wdrażanie identycznego interfejsu użytkownika na każdej platformie – wierzymy w udostępnianie unikalnych możliwości każdej platformy poprzez ten sam deklaratywny model programowania. Naszym deklaratywnym modelem programowania jest React.

Z naszego doświadczenia wynika, że jednokierunkowy przepływ danych spopularyzowany przez React ułatwia zrozumienie aplikacji. Preferujemy wyrażanie ekranu jako kompozycję deklaratywnych komponentów zamiast imperatywnie zarządzanych widoków. Sukces Reacta w internecie oraz kierunek rozwoju nowych natywnych frameworków Androida i iOS pokazują, że branża również przyjęła deklaratywne UI.

React spopularyzował deklaratywne interfejsy użytkownika. Pozostaje jednak wiele nierozwiązanych problemów, które React jest w wyjątkowej pozycji rozwiązać. React Native będzie nadal budować na innowacjach Reacta i pozostawać na czele ruchu deklaratywnych interfejsów użytkownika.

Ogłaszamy React Native 0.63 z LogBox

· 7 minut czytania
Mike Grabowski
Mike Grabowski
CTO and Co-Founder @ Callstack
Nieoficjalne Tłumaczenie Beta

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.

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.

Zrzut ekranu LogBox

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.

Pressable

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.

Natywne Kolory (PlatformColor, DynamicColorIOS)

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.

Zakończenie wsparcia dla iOS 9 i Node.js 8

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.

Inne znaczące ulepszenia

  • 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ń.

Podziękowania

Dziękujemy setkom współtwórców, którzy pomogli w stworzeniu wersji 0.63!

uwaga

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.

Ogłaszamy React Native 0.62 z obsługą Flippera

· 5 minut czytania
Rick Hanlon
React Native Core w Facebooku
Nieoficjalne Tłumaczenie Beta

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 domyślnie

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.

Zrzut ekranu Flippera dla 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.

Nowe funkcje trybu ciemnego

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.

Przeniesienie Apple TV do react-native-tvos

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.

Większe wsparcie przy aktualizacji

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.

Inne ulepszenia

  • 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".

Zmiany łamiące kompatybilność

  • 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.

Przestarzałe funkcje

  • 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.

Podziękowania

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.

Poznaj Doctor, nowe polecenie React Native

· 2 minuty czytania
Lucas Bento
Społeczność React Native
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Po ponad 20 pull requestach od 6 współtwórców ze Społeczności React Native z dumą prezentujemy react-native doctor - nowe polecenie, które pomoże Ci w rozpoczęciu pracy, rozwiązywaniu problemów i automatycznym naprawianiu błędów w środowisku deweloperskim. Polecenie doctor jest wzorowane na własnych poleceniach doctor z Expo i Homebrew, z odrobiną inspiracji interfejsem użytkownika zaczerpniętą z Jest.

Ogłaszamy React Native 0.61 z funkcją Fast Refresh

· 3 minuty czytania
Dan Abramov
React Core w Facebooku
Nieoficjalne Tłumaczenie Beta

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.

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.

Inne ulepszenia

  • 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.

Zmiany łamiące kompatybilność

  • Usunięto React .xcodeproj. W wersji 0.60 wprowadziliśmy wsparcie dla automatycznego łączenia poprzez CocoaPods. Zintegrowaliśmy również CocoaPods z testami end-to-end, dzięki czemu od teraz mamy ujednolicony standardowy sposób integracji RN z aplikacjami iOS. To skutecznie oznacza wycofanie wsparcia dla React .xcodeproj, a plik został usunięty począwszy od wersji 0.61. Uwaga: jeśli już korzystasz z automatycznego łączenia w 0.60, nie powinno to mieć na ciebie wpływu.

Podziękowania

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.

Poznaj Hermesa, nowy silnik JavaScript zoptymalizowany dla React Native

· 2 minuty czytania
Rachel Nabors
Inżynier Dokumentacji w Facebooku
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

W zeszłym tygodniu na konferencji Chain React ogłosiliśmy Hermesa, otwartoźródłowy silnik JavaScript, nad którym pracowaliśmy w Facebooku. To mały i lekki silnik JavaScript zoptymalizowany do uruchamiania React Native na Androidzie. Sprawdź szczegóły!

Hermes poprawia wydajność React Native poprzez zmniejszenie zużycia pamięci, redukcję rozmiaru pobieranej aplikacji oraz skrócenie czasu potrzebnego na osiągnięcie stanu użyteczności aplikacji, czyli "time to interactive" (TTI).

„Analizując dane dotyczące wydajności, zauważyliśmy, że sam silnik JavaScript znacząco wpływał na czas uruchamiania i rozmiar pobieranej aplikacji. Mając te informacje, wiedzieliśmy, że musimy zoptymalizować wydajność JavaScript w bardziej ograniczonych środowiskach telefonów komórkowych w porównaniu do komputerów stacjonarnych czy laptopów. Po rozważeniu innych opcji stworzyliśmy nowy silnik JavaScript o nazwie Hermes. Został zaprojektowany, aby poprawiać wydajność aplikacji, ze szczególnym uwzględnieniem naszych aplikacji React Native, nawet na urządzeniach masowej sprzedaży o ograniczonej pamięci, wolnej pamięci masowej i mniejszej mocy obliczeniowej.” —Hermes: Otwartoźródłowy silnik JavaScript zoptymalizowany dla aplikacji mobilnych, począwszy od React Native

Chcesz od razu zacząć? Koniecznie zapoznaj się z naszym nowym przewodnikiem dotyczącym włączania Hermesa w istniejącej aplikacji React Native w dokumentacji!

Ilustracja przedstawiająca połączone logo Hermesa i React Native jako skrzydlatą furię, wznoszącą się wśród grzmotów burzy elektrycznej z samotnego, świecącego telefonu z Androidem. Ilustracja: Rachel Nabors

Ogłaszamy React Native 0.60

· 5 minut czytania
Ryan Turner
Główny opiekun i programista React Native
Nieoficjalne Tłumaczenie Beta

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!

Skupienie na dostępności

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.

Nowy początek

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.

Nowy ekran inicjujący pomaga programistom rozpocząć pracę od samego początku z zasobami i dobrym przykładem

Wsparcie dla AndroidX

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.

matt-oakes w discussions-and-proposals

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 domyślnie

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ą.

Odchudzanie rdzenia

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!

Automatyczne linkowanie modułów natywnych

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.

Upgrade Helper

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

Upgrade Helper przejrzyście i łatwo pokazuje zmiany potrzebne do migracji na inną wersję React Native

Uwaga dla opiekunów bibliotek

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.

Podziękowania

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!

Aktualizacja Open Source React Native - czerwiec 2019

· 8 minut czytania
Christoph Nakazawa
Christoph Nakazawa
Former Engineer @ Facebook
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Kod i zdrowie społeczności

W ciągu ostatnich sześciu miesięcy ponad 550 współtwórców wprowadziło łącznie 2800 commitów do React Native. 400 współtwórców ze społeczności utworzyło ponad 1150 Pull Requestów, z których 820 Pull Requestów zostało scalonych.

Średnia dzienna liczba Pull Requestów w ostatnim półroczu wzrosła z trzech do około sześciu, mimo wydzielenia strony, CLI i wielu modułów z React Native w ramach inicjatywy Lean Core. Średnia liczba otwartych pull requestów spadła poniżej 25, a zazwyczaj odpowiadamy z sugestiami i recenzjami w ciągu kilku godzin lub dni.

Znaczące wkłady społeczności

Chcielibyśmy wyróżnić kilka niedawnych wkładów, które uważamy za wyjątkowe:

Lean Core

Głównym celem Lean Core jest wydzielenie modułów z React Native do osobnych repozytoriów dla lepszej konserwacji. W ciągu pół roku repozytoria takie jak WebView, NetInfo, AsyncStorage, strona dokumentacji i CLI otrzymały łącznie ponad 800 Pull Requestów. Oprócz lepszej konserwacji, projekty te mogą być wydawane niezależnie częściej niż React Native.

Usunęliśmy również przestarzałe polyfille i legacy'owe komponenty. Polyfille były dawniej potrzebne do obsługi funkcji językowych jak Map i Set w starszych wersjach JavaScriptCore (JSC). Obecnie React Native dostarcza nowszą wersję JSC, więc polyfille zostały usunięte.

Prace nadal trwają, ale już widać pierwsze efekty odwrócenia trendu zwiększania rozmiaru aplikacji: rok temu w wersji 0.54 rozmiar pakietu JavaScript React Native wynosił 530kb, a w wersji 0.57 wzrósł do 607kb (+77kb). Obecnie na gałęzi master obserwujemy redukcję o 28kb do 579kb, co daje ponad 100kb różnicy!

Kończąc pierwszą fazę Lean Core, będziemy bardziej świadomie wprowadzać nowe API do React Native, stale optymalizować rozmiar i wydajność, oraz wspierać społeczność w przejmowaniu własności nad komponentami.

Opinie użytkowników

Sześć miesięcy temu zapytaliśmy społeczność: „Co wam się nie podoba w React Native?”, co dało dobry przegląd problemów, z którymi się borykają. Odpowiedzieliśmy na ten post kilka miesięcy temu i teraz czas podsumować postępy w najważniejszych kwestiach:

  • Aktualizacje: Społeczność React Native zjednoczyła siły, wprowadzając wiele usprawnień w procesie aktualizacji: autolinking, lepsze polecenie aktualizacji dzięki rn-diff-purge, strona pomocnicza do aktualizacji (wkrótce). Będziemy też informować o zmianach łamiących kompatybilność i nowych funkcjach poprzez posty na blogu przy każdym głównym wydaniu. Wiele z tych ulepszeń sprawi, że przyszłe aktualizacje poza wersją 0.60 będą znacznie prostsze.

  • Wsparcie/niepewność: Wielu użytkowników było sfrustrowanych brakiem aktywności przy Pull Requestach i ogólną niepewnością co do zaangażowania Facebooka w React Native. Jak pokazaliśmy powyżej, możemy z całą pewnością stwierdzić, że jesteśmy gotowi na więcej Pull Requestów i z niecierpliwością czekamy na wasze propozycje i wkład!

  • Wydajność: React Native 0.59 dostarczył nową, znacznie szybszą wersję JavaScriptCore (JSC). Dodatkowo pracujemy nad domyślnym włączaniem inline-requires i w ciągu najbliższych miesięcy przygotowaliśmy więcej ekscytujących aktualizacji.

  • Dokumentacja: Niedawno rozpoczęliśmy gruntowną przebudowę i przepisanie całej dokumentacji React Native. Jeśli chcesz się przyłączyć, z radością przyjmiemy twoją pomoc!

  • Ostrzeżenia w Xcode: Pozbyliśmy się wszystkich istniejących ostrzeżeń i dokładamy starań, by nie wprowadzać nowych.

  • Hot Reloading: Zespół React pracuje nad nowym systemem hot reloadingu, który wkrótce zostanie zintegrowany z React Native.

Niestety, nie udało nam się jeszcze poprawić wszystkich obszarów:

  • Debugowanie: Naprawiliśmy wiele uciążliwych błędów, z którymi ludzie spotykają się na co dzień, ale niestety nie osiągnęliśmy w tej kwestii tak dużego postępu, jak byśmy chcieli. Zdajemy sobie sprawę, że debugowanie w React Native nie jest idealne i w przyszłości nadamy temu priorytet.

  • Symlinki w Metro: Niestety nie udało nam się jeszcze wdrożyć prostego rozwiązania tego problemu. Jednak użytkownicy React Native udostępnili różne obejścia, które mogą ci pomóc.

Biorąc pod uwagę liczne zmiany z ostatnich sześciu miesięcy, ponownie chcemy zadać wam to samo pytanie. Jeśli używasz najnowszej wersji React Native i masz uwagi, prosimy o komentarze w nowej edycji „Co wam się nie podoba w React Native?”

Ciągła integracja

Facebook scala wszystkie Pull Requesty i wewnętrzne zmiany najpierw do swojego repozytorium, a dopiero potem synchronizuje commity z GitHubem. Infrastruktura Facebooka różni się od popularnych usług CI, więc nie wszystkie testy open source były uruchamiane wewnętrznie. Oznaczało to, że commity synchronizowane z GitHubem często łamały testy w projekcie open source, co zajmowało dużo czasu na naprawę.

Héctor Ramos z zespołu React Native spędził ostatnie dwa miesiące na ulepszaniu systemów ciągłej integracji zarówno w Facebooku, jak i na GitHubie. Większość testów open source jest teraz uruchamianych przed zatwierdzeniem zmian w React Native w Facebooku, co zapewni stabilność CI na GitHubie podczas synchronizacji commitów.

Co dalej

Sprawdź koniecznie nasze prezentacje o przyszłości React Native! W ciągu najbliższych kilku miesięcy członkowie zespołu React Native z Facebooka wystąpią na konferencjach Chain React i React Native EU. Wypatrujcie też naszej kolejnej wersji - 0.60, która jest tuż za rogiem. To będzie ekscytujące

React Native na F8 oraz podcast o open source

· 3 minuty czytania
Christoph Nakazawa
Christoph Nakazawa
Former Engineer @ Facebook
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

W tym tygodniu Eli White wygłosił prezentację na F8 2019 o wykorzystaniu React Native w aplikacjach Facebooka na Androida i iOS. Z przyjemnością dzielimy się tym, nad czym pracowaliśmy przez ostatnie dwa lata i jakie mamy dalsze plany.

Zobacz nagranie na stronie developerów Facebooka:

F8 Talk about React Native

Najważniejsze punkty prezentacji:

  • W latach 2017-2018 skupiliśmy się na największym produkcie React Native – Facebook Marketplace. Współpracowaliśmy z zespołem Marketplace, aby podnieść jakość i ulepszyć doświadczenia użytkowników. Obecnie Marketplace jest jednym z najwyższej jakości produktów w aplikacji Facebooka na Androida i iOS.

  • Wydajność Marketplace stanowiła duże wyzwanie, szczególnie na średniej klasy urządzeniach z Androidem. W ciągu ostatniego roku skróciliśmy czas uruchamiania o ponad 50%, a kolejne ulepszenia są w drodze! Największe optymalizacje są wbudowywane w React Native i trafią do społeczności jeszcze w tym roku.

  • Mamy pewność, że dzięki React Native możemy budować wysokiej jakości, wydajne aplikacje potrzebne Facebookowi. Ta pewność pozwoliła nam inwestować w większe projekty, takie jak przemyślenie fundamentów React Native.

  • Microsoft wspiera i używa React Native for Windows, umożliwiając wykorzystanie istniejącej wiedzy i kodu do renderowania na platformie Universal Windows Platform. Śledźcie Microsoft Build w przyszłym tygodniu, aby usłyszeć więcej na ten temat.

Podcast React Radio o open source

Prezentacja Eli'ego kończy się omówieniem naszych ostatnich działań w open source. W marcu podzieliliśmy się aktualizacją naszych postępów, a niedawno Nader Dabit i Gant Laborde zaprosili Christopha do rozmowy w swoim podcaście React Native Radio o React Native w open source.

Najważniejsze punkty podcastu:

  • Rozmawialiśmy o tym, jak zespół React Native w Facebooku podchodzi do open source i jak budujemy zrównoważoną społeczność dopasowaną do skali projektu.

  • Realizujemy plan usuwania wielu modułów w ramach inicjatywy Lean Core. Moduły takie jak WebView czy React Native CLI otrzymały ponad 100 pull requestów od momentu ich wydzielenia.

  • Następnie skupimy się na gruntownej przebudowie strony internetowej i dokumentacji React Native. Śledźcie nasze komunikaty!

Odcinek wkrótce pojawi się w Twojej ulubionej aplikacji podcastowej, a nagranie możesz odsłuchać już teraz: