React Native — кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных и настольных приложений на JavaScript и TypeScript, созданный Facebook, Inc. (Ныне Meta).
React Native поддерживает такие платформы как Android, Android TV, iOS, macOS, tvOS, Web, Windows и UWP, позволяя разработчикам использовать возможности библиотеки React вне браузера для создания нативных приложений, имеющих полный доступ к системным API платформ.
Реализация Основные принципы работы React Native практически идентичны принципам работы React, за исключением того, что React Native управляет не браузерной DOM, а платформенными интерфейсными компонентами. JavaScript-код, написанный разработчиком, выполняется в фоновом потоке, и взаимодействует с платформенными API через асинхронную систему обмена данными, называемую Bridge. В 2021 году ожидается замена Bridge на более производительную синхронную модель обмена данными, поддерживающую парадигму zero-copy.
Хотя система стилей (способ конфигурации визуальных свойств элементов интерфейса) React Native имеет синтаксис, похожий на CSS, фреймворк не использует технологии HTML или CSS как таковые. Вместо этого для каждой из поддерживаемых фреймворком операционных систем реализованы программные адаптеры, применяющие заданный разработчиком стиль к платформенному интерфейсному элементу.
React Native также позволяет разработчикам использовать уже существующий код, написанный на других языках программирования — например, Java или Kotlin для Android и Objective-C или Swift для iOS.
React Native поддерживает интеграцию и в уже существующие приложения — например, часть интерфейса мобильного приложения может быть реализована на React Native, а часть — при помощи чисто платформенных средств.
Пример реализации
Пример «Hello, World» в React Native:
import { AppRegistry, Text, View, Button } from 'react-native'; import React from 'react';
const HelloWorldApp = () => { const [count, setCount] = React.useState(0);
const incrementCount = () => { setCount((prevCount) => prevCount + 1);
return ( <View> <Text>Hello world!</Text> <Text>{count}</Text> <Button onPress={incrementCount} title="Increase Count" /> </View> );
export default HelloWorldApp;
AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
См. также Flutter NativeScript Xamarin Apache Cordova
Примечания
Категория:Кроссплатформенное программное обеспечение Категория:Программное обеспечение с лицензией MIT