Начало работы с React Native в Windows 7, 8, 10

✍ Эта статья о том, как установить React Native Configure с Android Studio на компьютер с Windows 💻Руководство.

🐦 twitter.com/HatiaAshraf

⚓

1. Загрузите и установите Android Studio.

2. Создайте виртуальное устройство Android.

3. Настройте переменную среды.

4. Установите Node.JS

5. Установите React-native.

6. Изменение в корневом файле App.js.

1. Скачайте и установите Android Studio

▶ Загрузите студию Android по этой ссылке.🔖

↪ Установите студию Android,

↪Также установите Java на свой компьютер.

🔖Как загрузить и установить Java JDK 8 в Windows

2. Cсоздайте виртуальное устройство Android (AVD)📱

Для открытия AVD Manager:

Выберите Инструменты › Диспетчер AVD.
🖱Нажмите AVD Manager на панели инструментов.

↪ Нажмите здесьдля получения дополнительной информации об установке AVD

3. Настройте переменную среды:

📝 примечание: если вы уже настроили переменную среды Java, пропустите этот шаг.

Перейдите в:↪ 💻 Панель управления\Система и безопасность\Система

↪ 💻🖱Нажмите «Дополнительные параметры системы».

Затем ↪ Дополнительные параметры системы → Переменные среды → Создать и введите путь к Android SDK.

➡ Нажмите «Новая пользовательская переменная».

Имя переменной: ANDROID_HOME

Значение переменной: C:\Users\user\AppData\Local\Android\Sdk

Примечание: в поле value введите путь к вашему Android SDK. вы можете получить/скопировать у своего менеджера SDK Android Studio.

🔖Как загрузить и установить Java JDK 8 в Windows

4. Установите Node.JS на свой компьютер💻

↪🔖Нажмите здесь, чтобы скачать Node.js

~Проверьте, правильно ли установлен NodeJS

⏩ Запустите node -v , команду npm -v в командной строке.

💬 Если на экране отображаются результаты, указанные выше, значит, узел успешно установлен, если нет, переустановите узел.

5. Установите React-native

Установите react-native, введя следующую команду в терминале

npm установить -g реагировать родной кли

Создайте нативный проект React
Чтобы создать проект, запустите приведенную ниже команду в терминале из папки 📂, где вы хотите создать приложение.

реактивная инициализация MySampleApp

Установите командную строку в эту папку приложения 📂

cd MySampleApp

⏩ Затем запустите команду для запуска пакета, НО убедитесь, что вы запустили эмулятор.

реактивный запуск

📝 Примечание. Эта команда запуска запускается в другом приглашении, таком как Git-bash или cmd.

и эта команда

реакция-родной запуск-андроид

Запустите в другом приглашении, например, сначала вы открываете каталог своего приложения в Visual Studio, а затем командуете react-native run-android, в то же время start cmd нужно запускать в разных приглашениях, таких как Git bash или cmd.

📝 дополнительное примечание: со временем вы можете получить ошибку Неверное регулярное выражение❗

✅ решение: в папке каталога вашего проекта появляется \node_modules\metro-config\src\defaults\blacklist.js есть недопустимое регулярное выражение, которое необходимо изменить. измените первое выражение под sharedBlacklist с:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

to:
➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡➡

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

▶🔖Вы также можете перейти по этой ссылке, чтобы посмотреть видеоруководство по устранению ошибок.

6. Изменения в корневом файле App.js

↪📎 Вставьте приведенный ниже код в файл App.js и дважды нажмите клавишу R или выберите Reload в меню разработчика (Ctrl + M), чтобы обновить экран 📱AVD!

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text> heyy..! </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Спасибо