разрешение ресурсов, относящихся к реагирующему файлу за пределами проекта root - PullRequest
Новая
       25

разрешение ресурсов, относящихся к реагирующему файлу за пределами проекта root

0 голосов
/ 28 марта 2020

Проблема (android): где разместить активы изображения относительно js файла пакета, если файл пакета находится за пределами проекта root?

У нас есть небольшой сервис, куда мы загружаем JS связки на каждой сборке. Так, например, у нас есть приложение com.example, если мы хотим обновить наше приложение (пока в магазине приложений находится на рассмотрении приложение), тогда мы:

  1. загрузим JS bundle в android путь /data/data/com.example/files/bundle/android.bundle
  2. установить этот пакет как активный с помощью https://github.com/mauritsd/react-native-dynamic-bundle

Представьте, что в компоненте приложения реакции у нас есть одно изображение с путем star.png.

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

Я проверил путь к изображению с помощью https://reactnative.dev/docs/image#resolveassetsource в сборке релиза и в образе URI разрешается только в star.

Итак, я попробовал следующие файловые структуры:

№1 

data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star // <= our image

№2 

data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star.png // <= our image

Но неподвижное изображение не отображается, если файл пакета находится за пределами проекта root.

Вопросы:

  1. Что я делаю не так? https://github.com/Microsoft/react-native-code-push каким-то образом удалось ее решить.
  2. Является ли решение ios тем же, что и для android?

Заранее спасибо

1 Ответ

0 голосов
/ 28 марта 2020

Активы пакета должны быть помещены в ту же папку, где находится js файл пакета (проверено только на android).

Вы всегда можете получить путь к пакету через https://reactnative.dev/docs/image#resolveassetsource.

Как проверить:

  1. Поместить изображение star.png в проект root.
  2. Создать собственное приложение реагирования со следующим кодом: 
import React from 'react';
import {
  SafeAreaView,
  Text,
  StatusBar,
  Image
} from 'react-native';
import Star from './star.png';

const App: () => React$Node = () => {

  const r = Image.resolveAssetSource(Star);
  console.log(r);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text>TestAssetsApp</Text>
        <Image
          style={{width: 50, height: 50}}
          source={Star}
        />
      </SafeAreaView>
    </>
  );
};

export default App;
Установите путь к пакету в MainApplication.java (мой пакет приложения называется com.testassetsapp): 
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }

        // Add this method
        @Override
        protected String getJSBundleFile() {
          return "/data/data/com.testassetsapp/files/android.bundle";
        }
      };
Создание android JS пакета и активов с помощью: 
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android.bundle --assets-dest assets
Установите отладочную версию с помощью: 
cd android && ./gradlew installDebug

ВНИМАНИЕ: тестируйте только с помощью ./gradlew installDebug без запуска Metro-Bundler , поскольку он всегда переписывает путь к пакету.

Теперь, если вы запустите приложение, вы получите ошибку «Bundle not found».

Загрузить android.bundle файл в /data/data/com.testassetsapp/files/android.bundle

Теперь, если вы запустите приложение, оно должно запуститься. Но изображение звезды пока не отображается.

Загрузка файлов комплекта из папки assets в /data/data/com.testassetsapp/files, поэтому структура данных приложения должна быть следующей: enter image description here

Теперь, если вы перезапустите звезду приложения изображение должно отображаться.

...