55 postów z tagiem "announcement"

Dziś wydajemy React Native 0.36. Czytaj dalej, aby dowiedzieć się więcej o nowościach.

Headless JS​

Headless JS to sposób na uruchamianie zadań w JavaScript, gdy aplikacja działa w tle. Może być używany np. do synchronizacji świeżych danych, obsługi powiadomień push lub odtwarzania muzyki. Na razie dostępny jest tylko na Androida.

Aby rozpocząć, zdefiniuj swoje zadanie asynchroniczne w dedykowanym pliku (np. SomeTaskName.js):

module.exports = async taskData => {
  // Perform your task here.
};

Następnie zarejestruj zadanie w AppRegistry:

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Użycie Headless JS wymaga napisania natywnego kodu Java, aby umożliwić uruchomienie usługi w razie potrzeby. Zajrzyj do naszej nowej dokumentacji Headless JS, aby dowiedzieć się więcej!

API klawiatury​

Praca z klawiaturą ekranową jest teraz łatwiejsza dzięki Keyboard. Możesz teraz nasłuchiwać natywnych zdarzeń klawiatury i na nie reagować. Na przykład, aby zamknąć aktywną klawiaturę, wystarczy wywołać Keyboard.dismiss():

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

Dzielenie animowanych wartości​

Łączenie dwóch animowanych wartości przez dodawanie, mnożenie i modulo było już obsługiwane w React Native. W wersji 0.36 dodano możliwość dzielenia animowanych wartości. Są przypadki, gdy animowana wartość musi odwrócić inną animowaną wartość do obliczeń. Przykładem jest odwrócenie skali (2x --> 0.5x):

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

Wtedy b będzie podążać za animacją sprężynową a i generować wartość 1 / a.

Podstawowe użycie wygląda tak:

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

W tym przykładzie wewnętrzny obraz w ogóle się nie rozciągnie, ponieważ skalowanie rodzica zostaje skompensowane. Jeśli chcesz dowiedzieć się więcej, sprawdź przewodnik po animacjach.

Ciemne paski statusu​

Do StatusBar dodano nową wartość barStyle: dark-content. Dzięki temu możesz teraz używać barStyle zarówno na Androidzie, jak i iOS. Zachowanie będzie teraz następujące:

• default: Użyj domyślnych ustawień platformy (jasny na iOS, ciemny na Androidzie).

• light-content: Użyj jasnego paska statusu z czarnym tekstem i ikonami.

• dark-content: Użyj ciemnego paska statusu z białym tekstem i ikonami.

...i więcej​

To tylko próbka zmian w wersji 0.36. Sprawdź informacje o wydaniu na GitHubie, aby zobaczyć pełną listę nowych funkcji, poprawek błędów i zmian łamiących kompatybilność.

Możesz zaktualizować do wersji 0.36, uruchamiając następujące polecenia w terminalu:

$ npm install --save react-native@0.36
$ react-native upgrade

Kluczowym elementem świetnego doświadczenia deweloperskiego jest doskonała dokumentacja. Tworzenie dobrych dokumentów wymaga wiele - idealna dokumentacja powinna być zwięzła, pomocna, dokładna, kompletna i przyjemna w odbiorze. Ostatnio intensywnie pracowaliśmy nad ulepszeniem dokumentacji w oparciu o wasze opinie i chcemy podzielić się wprowadzonymi ulepszeniami.

Przykłady w tekście​

Kiedy uczysz się nowej biblioteki, języka programowania czy frameworka, następuje piękny moment, gdy po raz pierwszy piszesz fragment kodu, testujesz go, sprawdzasz czy działa... i on naprawdę działa! Stworzyłeś coś realnego. Chcieliśmy przenieść to bezpośrednie doświadczenie do naszej dokumentacji. Oto jak:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

Uważamy, że te wbudowane przykłady, wykorzystujące moduł react-native-web-player przy wsparciu Devina Abbotta, są doskonałym sposobem na naukę podstaw React Native. Zaktualizowaliśmy nasz samouczek dla nowych deweloperów React Native, aby wszędzie tam, gdzie to możliwe, korzystał z tej funkcji. Sprawdź to - jeśli kiedykolwiek zastanawiałeś się, co się stanie, gdy zmodyfikujesz choćby najmniejszy fragment przykładowego kodu, to świetny sposób na eksperymentowanie. Ponadto, jeśli budujesz narzędzia dla deweloperów i chcesz pokazać działający przykład React Native na swojej stronie, react-native-web-player znacznie to ułatwia.

Podstawowy silnik symulacyjny pochodzi z projektu react-native-web Nicolasa Gallaghera, który umożliwia wyświetlanie komponentów React Native takich jak Text czy View w przeglądarce. Zajrzyj do react-native-web, jeśli interesuje cię budowanie doświadczeń mobilnych i webowych współdzielących znaczną część kodu.

Lepsze przewodniki​

W niektórych obszarach React Native istnieje wiele sposobów osiągnięcia celu. Otrzymaliśmy sygnały, że możemy zapewnić lepsze wskazówki.

Przygotowaliśmy nowy przewodnik po nawigacji, który porównuje różne podejścia i doradza, czego użyć - Navigator, NavigatorIOS, NavigationExperimental. W średnim okresie pracujemy nad ulepszeniem i konsolidacją tych interfejsów. Na razie mamy nadzieję, że lepszy przewodnik ułatwi wam życie.

Dodaliśmy też nowy przewodnik po obsłudze dotyków, który wyjaśnia podstawy tworzenia interfejsów przypominających przyciski oraz krótko podsumowuje różne sposoby obsługi zdarzeń dotykowych.

Kolejnym obszarem, nad którym pracowaliśmy, jest Flexbox. Obejmuje to samouczki o tym, jak zarządzać układem za pomocą Flexboxa i jak kontrolować rozmiar komponentów. Znajdziesz tu także mniej efektowną, ale mamy nadzieję przydatną listę wszystkich właściwości kontrolujących układ w React Native.

Rozpoczęcie pracy​

Konfiguracja środowiska deweloperskiego React Native na twoim komputerze wiąże się z szeregiem instalacji i ustawień. Trudno sprawić, by instalacja była naprawdę ekscytującym doświadczeniem, ale przynajmniej możemy uczynić ją szybką i bezbolesną.

Stworzyliśmy nowy proces rozpoczynania pracy, który pozwala wybrać system operacyjny deweloperski i mobilny na początku, zapewniając jedno zwięzłe miejsce ze wszystkimi instrukcjami konfiguracyjnymi. Przetestowaliśmy też proces instalacji, aby upewnić się, że wszystko działa i że każdy punkt decyzyjny ma jasną rekomendację. Po przetestowaniu na naszych niczego niespodziewających się współpracownikach jesteśmy pewni, że to ulepszenie.

Pracowaliśmy także nad przewodnikiem dotyczącym integracji React Native z istniejącą aplikacją. Wiele dużych aplikacji korzystających z React Native, jak np. aplikacja Facebooka, w rzeczywistości łączy fragmenty napisane w React Native z częściami stworzonymi przy użyciu standardowych narzędzi. Mamy nadzieję, że ten przewodnik ułatwi więcej osobom budowanie aplikacji w ten sposób.

Potrzebujemy Waszej pomocy​

Wasze opinie pomagają nam ustalić priorytety. Wiem, że niektórzy czytając ten wpis pomyślą: "Lepsza dokumentacja? Pffft. Dokumentacja X nadal jest beznadziejna!". To świetnie – potrzebujemy tej energii. Najlepszy sposób przekazania nam opinii zależy od jej rodzaju.

Jeśli znajdziesz błąd w dokumentacji, np. nieprecyzyjny opis lub kod, który nie działa, zgłoś issue. Otaguj go jako "Documentation", aby łatwiej było przekierować go do odpowiednich osób.

Jeśli nie ma konkretnego błędu, ale coś w dokumentacji jest zasadniczo mylące, GitHub Issues nie jest najlepszym miejscem. Zamiast tego opublikuj prośbę na Canny dotyczącą obszaru dokumentacji wymagającego poprawy. Pomaga nam to ustalać priorytety przy pracach takich jak tworzenie przewodników.

Dzięki, że dotarliście tak daleko, i dziękujemy za używanie React Native!

Minął rok, odkąd udostępniliśmy React Native jako projekt open source. To, co zaczęło się jako pomysł garstki inżynierów, dziś jest frameworkiem używanym przez zespoły produktowe w Facebooku i poza nim. Podczas konferencji F8 ogłosiliśmy, że Microsoft wprowadza React Native do ekosystemu Windows, dając developerom możliwość budowania aplikacji na PC, telefony i Xbox. Dostarczą także open source'owe narzędzia i usługi, jak rozszerzenie React Native dla Visual Studio Code i CodePush, aby ułatwić tworzenie aplikacji na platformie Windows. Dodatkowo Samsung buduje React Native dla swojej platformy hybrydowej, co pozwoli programistom tworzyć aplikacje dla milionów SmartTV, urządzeń mobilnych i wearable. Wydaliśmy też Facebook SDK dla React Native, ułatwiając integrację funkcji społecznościowych jak Login, Sharing, App Analytics i Graph API. W ciągu roku React Native zmienił sposób budowania aplikacji na każdej większej platformie.

To była epicka podróż – ale dopiero zaczynamy. Oto spojrzenie wstecz na rozwój React Native od czasu open source'owania, wyzwania, które napotkaliśmy, oraz nasze oczekiwania na przyszłość.

To fragment artykułu. Całość przeczytasz na Facebook Code.

Wcześniej w tym roku przedstawiliśmy React Native dla iOS. React Native przenosi to, co programiści znają z Reacta na webie — deklaratywne, samodzielne komponenty UI i szybkie cykle rozwoju — na platformy mobilne, zachowując jednocześnie szybkość, wierność i wrażenia typowe dla natywnych aplikacji. Dziś z przyjemnością udostępniamy React Native dla Androida.

W Facebooku używamy React Native w środowisku produkcyjnym od ponad roku. Niemal dokładnie rok temu nasz zespół rozpoczął pracę nad aplikacją Ads Manager. Naszym celem było stworzenie nowej aplikacji, która pozwoli milionom osób reklamującym się na Facebooku zarządzać kontami i tworzyć nowe reklamy w podróży. Okazała się ona nie tylko pierwszą w pełni napisaną w React Native aplikacją Facebooka, ale też pierwszą wieloplatformową. W tym poście chcemy podzielić się z Wami, jak ją zbudowaliśmy, jak React Native umożliwił nam szybsze działanie oraz jakie wnioski wyciągnęliśmy.

To fragment. Przeczytaj resztę wpisu na Facebook Code.

Przedstawiliśmy React światu dwa lata temu i od tego czasu obserwowaliśmy imponujący wzrost jego popularności, zarówno wewnątrz Facebooka, jak i poza nim. Dziś, mimo że nikt nie jest zmuszony do jego używania, nowe projekty webowe w Facebooku powszechnie powstają z wykorzystaniem Reacta w różnych formach, a framework ten zdobywa szerokie uznanie w całej branży. Inżynierowie codziennie wybierają React, ponieważ pozwala im skupić więcej uwagi na produktach, a mniej na walce z frameworkiem. Dopiero po dłuższym czasie budowania z Reactem zaczęliśmy rozumieć, co czyni go tak potężnym narzędziem.

React zmusza nas do rozbijania aplikacji na odrębne komponenty, z których każdy reprezentuje pojedynczy widok. Dzięki tym komponentom łatwiej iterować nad naszymi produktami – nie musimy trzymać całego systemu w głowie, aby wprowadzić zmiany w jednej jego części. Co ważniejsze, React zastępuje mutacyjne, imperatywne API DOM deklaratywnym podejściem, podnosząc poziom abstrakcji i upraszczając model programowania. Odkryliśmy, że budując z Reactem, nasz kod staje się znacznie bardziej przewidywalny. Ta przewidywalność pozwala nam iterować szybciej i z większą pewnością, a nasze aplikacje stają się dzięki temu znacznie bardziej niezawodne. Co więcej, nie tylko łatwiej skalować aplikacje zbudowane w React, ale również odkryliśmy, że łatwiej skalować wielkość samych zespołów.

W połączeniu z szybkim cyklem iteracji w środowisku webowym, zbudowaliśmy z Reactem wspaniałe produkty, w tym wiele komponentów Facebook.com. Stworzyliśmy także niesamowite frameworki w JavaScripcie bazujące na React, jak Relay, który pozwala nam znacznie uprościć pobieranie danych na dużą skalę. Oczywiście, środowisko webowe to tylko część historii. Facebook posiada także szeroko używane aplikacje na Androida i iOS, zbudowane na rozłącznych, własnych stosach technologicznych. Konieczność budowania aplikacji na wielu platformach podzieliła naszą organizację inżynieryjną, ale to tylko jeden z czynników utrudniających natywny rozwój aplikacji mobilnych.

To jest fragment. Przeczytaj resztę wpisu na Facebook Code.