Przejdź do treści głównej

0.36: Headless JS, API klawiatury i więcej

· 3 minuty czytania
Héctor Ramos
Héctor Ramos
Former Developer Advocate @ 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 →

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