React очень прост и эффективен для создания больших приложений. React Native позволяет использовать React для создания мобильных приложений, работающих как на Android, так и на iOS.

В этом уроке мы продемонстрируем, как создавать приложения для iOS с использованием React Native.

Что такое React Native?
React Native позволяет писать приложения для Android и iOS с использованием JavaScript. Он использует концепцию виртуального DOM React для управления компонентами пользовательского интерфейса собственной платформы, обеспечивая пользователям знакомый интерфейс.

Приложения iOS могут быть созданы только на macOS, поэтому мы начнем наш урок с демонстрации того, как установить React Native на Mac.

Установка React Native на mac OS
Интерфейс командной строки React Native доступен в виде пакета npm. Перед установкой убедитесь, что Xcode установлен в вашей системе. Здесь вы создаете собственный код iOS для использования React Native. Установите Xcode из магазина приложений.

Как только Xcode будет установлен, мы сможем приступить к созданию нашего приложения. Мы будем использовать Cocoapods в качестве менеджера зависимостей. Установите Ruby с помощью brew install ruby, затем установите Cocoapods в качестве драгоценного камня с помощью sudo gem install cocoapods.

npm i -g react-native-cli

Создайте новый собственный проект React с помощью react-native init myproject.

В вашем текущем рабочем каталоге должна быть создана новая папка myproject со следующей структурой:

├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── node_modules
├── package.json
└── yarn.lock

Запустите проект с помощью npm run ios. Это запустит приложение на симуляторе iOS.

 

 

Создание собственного приложения React для iOS

Процессы создания собственных приложений React для iOS и Android аналогичны до тех пор, пока вы не начнете работать с API, зависящими от платформы. Большинство доступных элементов пользовательского интерфейса работают как для платформ Android, так и для iOS.

React Native предоставляет базовые элементы строительных блоков, которые используются для создания сложных пользовательских интерфейсов. К числу наиболее важных относятся:

Text используется для отображения текста в приложении — 
e.g., <Text>Some Text</Text>
View представляет собой контейнер с поддержкой компоновки и стиля — 
e.g., <View><Text>Some Text</Text></View>

Вы можете найти полный список основных компонентов и API для кнопок, списков, изображений, стилей, пользовательских вводов и многого другого в документах React Native.

Точкой входа для собственного приложения React является index.js. Это содержит основной компонент для визуализации приложения.

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
// registering the component to be rendered.
AppRegistry.registerComponent(appName, () => App);

React Native компоненты
Собственный компонент React очень похож на компонент React. Все API-интерфейсы React также доступны в React Native.


Давайте создадим простую кнопку увеличения, чтобы лучше понять собственные API-интерфейсы React:

import React, { useState } from 'react';
/* Import basic components from react native */
import {
  Button,
  SafeAreaView,
  StatusBar,
  View,
  Text
} from 'react-native';

const App = () => {
/* using useState Hook for creating state*/
  const [count,setCount]=useState(0);
  return (
   /* using state in button and updating on click*/
    <SafeAreaView>
      <StatusBar/>
      <View style={{marginTop:"100%"}}>
      {/* using state in button and updating on click*/}
        <Button onPress={()=>setCount(count+1)} title={`Count is ${count}`} />
      </View>
    </SafeAreaView>
  );
};
export default App;

 

 

Выполнение сетевых вызовов

Связь с внешними службами очень важна для любого приложения. React Native обеспечивает единую абстракцию над API платформы. Этот пример демонстрирует очень эффективное использование fetch и Image, предоставленными в React Native:

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, SafeAreaView, Text, View, Image } from 'react-native';
export default App = () => {
  // state for loading
  const [isLoading, setLoading] = useState(true);
  // state to hold fetched data
  const [data, setData] = useState(null);
  // use effect to fire up on component load
  useEffect(() => {
    fetch('https://random.dog/woof.json')
      .then((response) => response.json())
      // set the data
      .then((json) => setData(json.url))
      // if error log the error
      .catch((error) => console.error(error))
      // stop loading(by setting the isLoading false)
      .finally(() => setLoading(false));
  }, []);
  return (
    <View style={{ flex: 1, padding: 24 }}>
      <SafeAreaView />
      {/*Check if */}
      {isLoading ? <ActivityIndicator /> : (
        data ? <Image
          style={{
            width: 350,
            height: 400
          }}
          source={{
            uri: data
          }}
        /> : <Text>No Image</Text>
      )}
      <Text>{data}</Text>
    </View>
  );
};

 

 

Использование пакетов npm

В React Native есть большое сообщество разработчиков, которые постоянно создают высококачественные библиотеки для решения различных задач.

Чтобы продемонстрировать, как интегрировать сторонние библиотеки в ваше приложение React Native для iOS, давайте добавим кэш в наше приложение, используя популярную библиотеку хранения. react-native-mmkv-storage написано на C++.

Поскольку react-native-mmkv-хранилище использует собственный код, процесс установки немного отличается от процесса установки чистых модулей JavaScript.

Первое установите react-native-mmkv-storage с помощью npm:

npm install react-native-mmkv-storage

Затем обновите файл ios/Podfile изменив цель развертывания:

# PodFile
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
# changed from 10.0 to 11.0
platform :ios, '11.0'
// ...

Теперь установите собственную часть модуля, используя команду pod install в каталоге ios. Установка зависит от модуля.

Используйте библиотеку в коде для хранения данных, возвращаемых из API:

// App.js
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, SafeAreaView, Text, View } from 'react-native';
import { MMKV } from './storage';
export default App = () => {
  // state for loading
  const [isLoading, setLoading] = useState(true);
  // state to hold fetched data
  const [data, setData] = useState([]);
  // use effect to fire up on component load
  useEffect(() => {
    MMKV.getArrayAsync("data_val").then((cachedValue) => {
      if (cachedValue && cachedValue.length) {
        setData(cachedValue)
        return
      }
      fetch('https://api.github.com/users')
        .then((response) => response.json())
        // set the data
        .then(async (json) => {
          await MMKV.setArrayAsync("data_val", json)
          setData(json)
        })
        // if error log the error
        .catch((error) => console.error(error))
      // stop loading(by setting the isLoading false)
    }).finally(() => setLoading(false));
  }, [])
  return (
    <View style={{ flex: 1, padding: 24 }}>
      <SafeAreaView>
      </SafeAreaView>
      {/*Check if */}
      {isLoading ? <ActivityIndicator /> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.id} {item.login}</Text>
          )}
        />
      )}
    </View>
  );
};

// storage.js
import MMKVStorage from "react-native-mmkv-storage"
export const MMKV = new MMKVStorage.Loader().initialize();

 

 

Использование собственных API, предоставляемых React Native

React Native предоставляет тонкую оболочку JavaScript для нескольких собственных API, включая ActionSheetIOS , DynamicColorIOS и Settings.

Settings используются для хранения пар ключ-значение на устройстве. ActionSheetIOS открывает нижний лист действия и предоставляет общий доступ к нижнему листу с устройством iOS. DynamicColorIOS используется для определения цветов в зависимости от темы устройства (т.е. темной или светлой темы).

В приведенном ниже примере из документов React Native используются таблицы действий. Эти API используются так, как если бы использовались обычные объекты или функции JavaScript.

mport React, { useState } from "react";
import { ActionSheetIOS, Button, StyleSheet, Text, View } from "react-native";
const App = () => {
  const [result, setResult] = useState("
");
  const onPress = () =>
 // open sheet
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Cancel", "Generate number", "Reset"],
        destructiveButtonIndex: 2,
        cancelButtonIndex: 0,
        userInterfaceStyle: 'dark'
      },
      buttonIndex => {
 // handle button press on the sheet
        if (buttonIndex === 0) {
          // cancel action
        } else if (buttonIndex === 1) {
          setResult(Math.floor(Math.random() * 100) + 1);
        } else if (buttonIndex === 2) {
          setResult("
");
        }
      }
    );
  return (
    <View style={styles.container}>
      <Text style={styles.result}>{result}</Text>
      <Button onPress={onPress} title="Show Action Sheet" />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  },
  result: {
    fontSize: 64,
    textAlign: "center"
  }
});
export default App;

Вывод
Создавать приложения для iOS очень просто с помощью React Native. В этом уроке мы продемонстрировали, как установить React Native, используя концепцию React в React Native. Мы рассмотрели основные компоненты, предоставляемые React Native из коробки, показали, как устанавливать библиотеки, и познакомили вас с некоторыми оболочками вокруг собственных API, предоставляемых React Native.

SkillPass