Expo работает только в Интернете и не работает на Android с множеством проблем

Question

Мой проект в основном основан на этом шаблоне . Чтобы в дальнейшем не возникать проблемы с развертыванием, я использую expo.

. Теперь мне просто интересно, почему развертывание на Android не работает. Когда я развертываю его в Интернете, он отлично работает без каких-либо проблем. Но выполнение дает мне и это на Android эмуляторе:

Но структура проекта чистая, и index.css работает правильно

В чем разница между Run in web и Run on android ?

Также, когда я просто удаляю этот индекс. css для тестирования. Интернет по-прежнему работает, но без стилей. Но на Android я получаю еще одну ошибку на моем использованном localstorage.

Я знаю, что есть разница между react-native и react-web. Но я думал, что expo справится с этим. Может, я слишком многого ожидал от expo? Так что я ошибаюсь, и все в порядке. И все, что мне нужно сделать, это заставить его работать на Android, например, исправить проблему index.css и localstorage? Или есть более разумный способ заставить мое явно react-web приложение работать на моем Android устройстве?

Answer 1

Итак, react-native и react-native-web очень разные.

• react-native - с использованием собственных элементов управления UI и полным доступом к собственной платформе
• react-native-web - приносит платформенно-зависимые c Компоненты и API-интерфейсы React Native в Интернет

Хотя можно использовать react-native-web для Интернета и нативных приложений, таких как Android, это не рекомендуется. Вам всегда нужно искать обходные пути, например, с localstorage.

Лучше полностью переключиться на react-native и переписать весь код для работы родной способ. Например, вместо использования index.css теперь вам нужно создать Stylesheet непосредственно в коде.

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

// /App.js
import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
  return (
    <HybridApp />
  );
}
export default App;