Android React Native에서 이미지 리소스를 로드하는 올바른 자세

이 글에는 안드로이드 리액트 네이티브의 사용 세부 사항에 대한 질문과 앱 내부의 이미지 리소스를 어떤 방법으로도 로드할 수 없다는 질문이 담겼는데, 당시 코드는 이랬다.

공식 문서에서도 이렇게 썼는데 Image는 여기에 이미지 묘사를 썼지만 다른 페이지 문서에서 서로 모순된다. Images는 이 페이지가 들어간 지 얼마 되지 않아 여기에 이미지 묘사를 썼을 것이다. 즉, 정확한 app 내부 이미지 탑재 자세는 다음과 같다.

물론 그림은res의drawable 디렉터리에 존재하고uri에 대응하는 그림의 이름은 접미사가 포함되지 않는다는 것을 기억하십시오.이렇게 하면 그림이 정확하게 불러오고 표시될 수 있다.이 글은 정적 이미지 자원을 불러오는 것도 언급했다. (이 방식은 문제가 있어 불러올 수 없다.) 나는 index에 있다.android.js는 디렉터리에 icon이라는 이름을 던졌다.png 그림을 불러옵니다.

결과적으로 그림이 불러오지 않았지만 틀린 보고도 하지 않았다.일단 그것을 무시하고, 어쨌든 현재 판본은 아직 불안정하니, 정식으로 안정되면 다시 이야기하자.어쨌든 지금 리액트 네이티브를 배우는 건 구덩이를 메우는 과정이야.그리고 만약에 핸드폰 메모리 카드에 있는 이미지 자원을 불러오려면 그 방식도 매우 간단하다. 만약에 내가 지금 sdcard 루트 디렉터리에 있는 icon을 불러오려고 한다면.png.대응하는 코드는 다음과 같다.

file://파일을 추가한 경로/sdcard/icon을 볼 수 있습니다.png을 불러옵니다. 물론 권한이 필요합니다.이렇게 하면 그림이 정확하게 불러올 수 있다.인터넷 사진은 말하지 않겠다. 전에 그 글에서 이미 언급되었다

즉, 지금까지는 정적 자원을 불러올 수 없었고 이것도 버그였다. 장래의 어떤 버전은 반드시 복구될 것이다. 임시적인 해결 방법은https://github.com/WoLfulus/react-native/commit/33e2d052b6e2e3e6b3595572abbc3cb9b66d5755node 열기modules\react-native\Libraries\Image\resolveAssetSource.js 파일,

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
}

다음으로 수정

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  //return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
   var imagePath = assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
  if (imagePath[0] == "/" || imagePath[0] == "\\") {
      imagePath = imagePath.substr(1);
  }
  return imagePath;
}

이때 쓰세요.

정적 이미지 자원을 정상적으로 불러오고 표시할 수 있습니다.글을 쓸 때 React Native Android의 버전은 0.14.2이고 개발 환경은 win 7 X64로 머지않아 이런 문제들이 하나하나 복원될 것으로 믿는다.