The Ultimate Руководство по созданию кросс-платформенных приложений Реакция нативная

Вы также можете составить пользовательские компоненты, объединив эти примитивы. Для полного списка проверьте официальную документацию React Native.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

Навигация не встроена в React Native core. Наиболее популярным решением является React Navigation. Она обеспечивает стек навигатора (как навигационный стек), навигатор вкладки и навигатор ящика. Установите его с:

npm install @react-navigation/native @react-navigation/stack

После установки заверните приложение и определите свои экраны:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

укладка

React Native использует объекты JavaScript для стилизации вместо CSS. Вы определяете стили с помощью или встроенных объектов. Движок компоновки по умолчанию Flexbox, со свойствами, такими как , , . Медиазапросов CSS нет; адаптивный дизайн достигается через API или библиотеки, такие как .

Создание вашего первого кросс-платформенного приложения: пример шаг за шагом

Давайте создадим простое приложение погоды, которое извлекает данные из общедоступного API и отображает их на обеих платформах. Это продемонстрирует управление состоянием, сетевые запросы и состав компонентов.

Шаг 1: Настройка проекта

Создайте новый проект с помощью React Native CLI:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Шаг 2: Установите зависимости

Нам нужно несколько пакетов:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Для вызова API мы будем использовать встроенный API . Опционально установите для значков.

Шаг 3: Создайте домашний экран

Создайте :

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Шаг 4: Проводите навигацию

В , импортировать навигатор и экран:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Шаг 5: Запустите приложение

Запустите Metro bundler (), затем запустите Android () или iOS (). После успешного вызова API вы должны увидеть ввод текста, кнопку и данные о погоде.

Это базовое приложение работает на обеих платформах с идентичным кодом JavaScript.

Преимущества использования React Native

• Обмен бизнес-логикой, управлением состоянием и компонентами пользовательского интерфейса на разных платформах. Вы даже можете повторно использовать код с веб-приложением с помощью React Native для Web.
• Производительность: Производительность, близкая к исходной, потому что пользовательский интерфейс визуализируется с использованием нативных компонентов, а не веб-просмотров. Нить JavaScript работает асинхронно, и тяжелые вычисления могут быть выгружены на нативные модули.
• Большое сообщество и кампус; Экосистема: Тысячи библиотек, яркое сообщество на GitHub и обширные инструменты. Проблемы хорошо документированы, и плагины существуют практически для каждой потребности.
• Быстрая разработка с горячей перезагрузкой: Пакет Metro поддерживает замену горячего модуля (HMR). Вы можете редактировать код и мгновенно видеть изменения без восстановления всего приложения.
• Обновления вне сети: С помощью таких сервисов, как Microsoft App Center или CodePush, вы можете напрямую нажимать обновления JavaScript и активов на пользователей без одобрения магазина приложений.
• Стоимость: Одна команда может поддерживать единую кодовую базу вместо двух отдельных родных команд. Это снижает как затраты на разработку, так и на техническое обслуживание.