Эмулятор из Менеджера виртуальных устройств в Android Studio не распознаёт изменения в коде при использовании Expo и React Native для Android. Быстрая перезагрузка сломана?

Содержание

Вопрос или проблема
App.js файл:
Print.js файл:
Ответ или решение
Причина проблемы
Возможные решения
Заключение

Вопрос или проблема

Я обнаружил своеобразное поведение в эмуляторе Android.

Когда я изменяю код в JavaScript файле, который не содержит фрагмента кода для отображения, эмулятор, похоже, не распознает изменения после сохранения файла, и даже если срабатывает событие, изменения не вступают в силу. Я создал пустое приложение, просто чтобы протестировать это поведение, так как думал, что какая-то библиотека могла изменить Metro Bundler.

Не нашел быстрого решения нигде, поэтому я скопировал и вставил код ниже:

`App.js` файл:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { PrintOutside } from "./assets/model/Print";

export default function App() {
PrintOutside();

function PrintInside() {
console.log("Печать внутри 2");
}
return (
<View style={styles.container}\>
<View style={styles.buttonView}\>
<Button title="Печать из внешнего файла" onPress={PrintOutside} />
</View>
<Button title="Печать из внутреннего файла" onPress={PrintInside} />
<StatusBar style="auto" />
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
buttonView: {
marginBottom: 10,
},
});

`Print.js` файл:

export function PrintOutside() {console.log("Печать снаружи")}

Каждый раз, когда я нажимаю кнопку “Печать из внешнего файла”, она всегда выводит одно и то же значение, даже если я изменяю его в файле Print.js и сохраняю. Однако, если я изменяю что-то в файле App.js и сохраняю, то измененное значение в Print.js выводится. С другой стороны, любые изменения, которые я вношу в файл App.js, после сохранения распознаются эмулятором. Например, если я изменяю console.log(“Печать внутри 2”) на console.log(“Печать внутри 3”), это работает немедленно после сохранения файла и нажатия кнопки “Печать из внутреннего файла”.

Попробовал все перечисленное ниже, без успеха:

Изменение файла app.json, включая "web": {"bundler": "metro"}, в свойстве expo.
Запуск expo start --clear для перезапуска с чистым кэшем.
Использование сборки разработки Expo через npx expo run:android.
Установка и использование react-refresh.
rm .git/index.lock (файл не существует)

Ближайшая статья, которую я нашел по поводу моей проблемы, это следующая:

https://github.com/facebook/react-native/issues/28420

Меня действительно раздражает это поведение, так как оно требует от меня постоянно перезагружать приложение, чтобы продолжить разработку.

Ответ или решение

Эта проблема, с которой вы столкнулись, часто встречается при разработке на Expo и React Native. Давайте разберёмся по шагам, как решить эту проблему с обновлением кода в вашем эмуляторе Android.

Причина проблемы

Когда вы изменяете код в файлах JavaScript, React Native и Expo должны обновить приложение и применять изменения (это называется "Fast Refresh"). Однако, в вашем случае обновления не происходят, если изменения сделаны в Print.js. Это может быть связано с тем, что Metro Bundler не отслеживает изменения в файлах правильно, или с тем, что PrintOutside не вызывается должным образом.

Возможные решения

Проверьте структуру импорта/экспорта:
Убедитесь, что файл Print.js правильно импортируется и экспортируется в App.js. Структура вашего кода выглядит корректной, но стоит также сделать следующее:
- Убедитесь, что у вас нет циклических зависимостей и все пути к файлам указаны точно.
Используйте console.log для отладки:
Попробуйте добавить логирование в файл Print.js, чтобы убедиться, что изменения в файле действительно применяются. Например:
```
export function PrintOutside() {
   console.log("Printing outside - updated!");
}
```
Сохраните изменения, а затем проверьте, отображается ли новый текст в консоли.
Запуск приложения в режиме разработки:
Убедитесь, что ваше приложение запущено в режиме разработки. Иногда ошибки в конфигурации могут привести к тому, что обновления не применяются параллельно. Вы можете сделать это с помощью команды expo start и убедиться, что в консоли отображаются сообщения о "Fast Refresh".
Очистка кеша:
Вы уже пробовали expo start --clear, что является хорошим шагом. Вы также можете попробовать удалить папку node_modules и файл package-lock.json, а затем заново установить зависимости с помощью:
```
rm -rf node_modules package-lock.json
npm install
```
Используйте Expo Go:
Попробуйте использовать приложение Expo Go на вашем устройстве вместо эмулятора. Это иногда помогает в тестировании и устранении проблем с hot reloading.
Настройки app.json:
Убедитесь, что в вашем app.json присутствуют правильные настройки для разработки. Например:
```
{
   "expo": {
       "developmentClient": true,
       "web": {
           "bundler": "metro"
       }
   }
}
```
Переход на npx expo run:android:
Убедитесь, что ваша среда разработки в порядке, и используйте npx expo run:android, чтобы запустить проект с корректными настройками. Это важно, особенно если вы используете кастомные шаблоны или библиотеки.

Заключение

Если после выполнения всех вышеуказанных шагов проблема не решилась, проверьте, нет ли открытых проблем по вашему случаю на GitHub или Discord-каналах Expo и React Native. Иногда определенные библиотеки могут вызывать конфликты.

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