은 네이티브 이미지 URI 내가 로컬 파일에서 이미지를 표시하려고

Question

작동하지 않습니다 반작용, 그래서 수행하려고이

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}} 
    style={{height:150,width:150}} 
/> 

내 컨테이너 구성 요소는 높이와 폭을 점점 보이지만 이미지가 '아무튼 부하. 그래서 노력이

<Image 
    source={require('../../assets/img_src/BTI.jpg')} 
    style={{height:150,width:150}} 
/> 

이 작동 정말 잘, 내가 먼저 주소 파일을 조작하고 변수에 저장하려면 내가이 구현을 사용할 수 없습니다 알고 불행하게도까지한다. 예 :

const imgSrc = `../../assets/${data.image}`; 

여기서 data.image = 'img_src/BTI.jpg'. 안드로이드 스튜디오에서 내 안드로이드 시뮬레이터의 모든 데이터를 삭제하려고하지만 결과는 동일합니다. 내가 뭔가 잘못하고 있는거야? 이것에 대한 더 나은 구현이 있습니까?

고마워 :)

이

Answer 1

동적 경로의 패키저는 사전에 경로를 알고 기본 반응의 의도 된 행동을 필요로한다 require() 할 수없는 - 우리는이 문제가 있었다 React Native issues

를 참조하십시오 우리의 프로젝트에서 DB에 이미지 URL을 저장하고 앱에 문자열을 연결하여 로컬에 저장된 이미지의 경로를 얻으려고했습니다. 당신이 발견 한 것처럼, 이것은 효과가 없습니다. 우리의 해결 방법이 유용 할 수도 있습니다. 우리 /images 폴더에서

, 우리는 단순히 키가 너무

export const Images = { 
    image1: require('./image1.png'), 
    image2: require('./image2.png'), 
    image3: require('./image3.png'), 
    }; 

처럼 우리의 모든 지역 이미지 경로에 매핑 이제 패키저는 사전에 모든 경로를 알고 행복했다 객체를 내 보낸 새 images.js 파일을 만든 . 그런 다음 imageKey을 DB 항목에 추가하고 절대 경로 대신이 값을 사용했습니다. 이미지를 잡으려면

import { Images } from '../images/images'; 
// get your image key e.g. passed down through props 
const img = Images[imageKey]; 

... 
render() { 
    ... 
    <Image source={img} /> 
    ... 
} 

정확한 사용 사례에 맞지 않을 수도 있지만 잘하면 사용법을 잘 활용할 수 있습니다.