Native(원본 반응)

Native(원본 반응)

반응-원래로 시작하는 중인데 정적인 이미지가 필요한데 문제가 좀 있어.

지금까지 내가 가지고 있는 가장 기본적인 코드는 다음과 같다.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var buzz = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={require('image!bg')}  style={styles.bg}>
          <Text style={styles.welcome}>
            Welcome to Buzz! iOS interface to
          </Text>
          <Text style={styles.welcomeHeader}>Charityware</Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  welcomeHeader: {
    fontWeight: '600',
    fontFamily: 'Helvetica',
    color: '#fff',
    fontSize: 50,
    alignSelf: 'center'
  },
  bg: {
    width: 400,
    height: 300,
    alignSelf: 'auto',

  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
  },
});

AppRegistry.registerComponent('buzz', () => buzz);

주요 문제 영역:

    <Image source={require('image!bg')}  style={styles.bg}>
      <Text style={styles.welcome}>
        Welcome to Buzz! iOS interface to
      </Text>
      <Text style={styles.welcomeHeader}>Charityware</Text>
    </Image>

내 앱을 패키징하고 실행할 때 렌더 오류가 발생함:

나는 당신이 xcode에 있는 이미지를 이미지 세트로 추가해야 한다고 알고 있다.require이미지를 찾고 해당 끝에 이미지 세트를 추가하기 위해 호출:

...하지만 소용이 없었다.생각나는 사람 있어?나는 문서를 읽어 보았고, 규정된 방법으로 이것을 하고 있는 것 같다.고마워!

기본 릴리즈 리액트 이후0.14iOS와 Android의 이미지 처리가 정상화되어 현재는 다르다.나는 Github에 관한 매우 명확한 커밋 노트 외에는 어떤 문서도 찾을 수 없었다.새 자산 시스템을 문서화하십시오.

제안된 문서의 스크린샷만 있을 뿐:

업데이트: 현재 실제 설명서에 대한 링크가 있음: https://facebook.github.io/react-native/docs/images.html

나도 비슷한 문제가 있었는데, 그 다음 xcode 프로젝트의 아래 파일 시스템의 이미지 파일 이름을 바꾸었다.Images.xcassets로드하는 이미지와 일치하는 접미사 및 대문자로 된 디렉토리.

예를 들어, 다음과 같다.source={require('image!Villagers')}그것은 정확히 다음과 같은 이름의 이미지 파일을 필요로 했다.Villagers.pngVillagers@2x.png그리고Villagers@3x.png'@를 찾을 수 파일 이름의 '@3x' 부분이 없으면 이미지를 찾을 수 없을 것이다.

실행 중인 Resact Native 버전을 선택하십시오.그것과 관련된 포장업자와 관련된 문제가 해결되었다.

이 경우 다음과 같이 dev 서버를 업데이트하거나 실행할 수 있다.

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

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

이 질문은 이미 답해 두었지만, 안드로이드에서 Native react를 사용하면 같은 문제가 생길 수 있다.내게 있어 해결책은source={{ uri: "google", isStatic: true }}대신에source={required('./bg.png')}.

에 이미지를 추가하는 것을 잊지 마십시오.src/main/res/drawable폴더

참고: 새 리소스에 애플리케이션 빌드 필요 - 새 리소스를 이미지에 추가할 때마다XCodes를 사용하기 전에 XCode를 통해 앱을 다시 만들어야 할 필요가 있을 것이다. - 시뮬레이터 내에서 다시 로드하는 것만으로는 충분하지 않다. (Ract Native docs https://facebook.github.io/react-native/docs/image.html#content)에서).

또한 포장기를 다시 시작하십시오.그것으로 나는 그 문제가 해결되었다.

패키지를 만들어서 이미지를 쉽게 참조할 수 있다.자산 폴더의 json 파일.

프로젝트 폴더 구조

꾸러미json

그리고 이 코드로 불러도 된다.

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>

정적 이미지의 경우 다음과 같은 경로를 제공하십시오.

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

프로젝트 디렉터리의 이미지 폴더에 저장된 이미지인 경우,

참조URL: https://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native