네이티브 이미지 구성 요소가 android에서 작동하지 않습니다.

Question

React Native에 매우 익숙하며 Image 작업에 문제가 있습니다. 이미지 구성 요소 내부

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
} from 'react-native'; 

class TestProject extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     <Image source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/> 
     <Text style={styles.instructions}> 
      To get started, edit index.android.js 
     </Text> 
     <Text style={styles.instructions}> 
      Shake or press menu button for dev menu 
     </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

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

URL은 React Native Image documentation에서 복사 :

내 질문을 단순화하기 위해, 나는 새가 아래 index.android.js 네이티브 프로젝트와 방금 추가 한 이미지의 구성 요소를 반응 만들었습니다. 내가 뭘 잘못하고 있니? 누구든지 나를 도울 수 있습니까?

내 반응이 네이티브 0.29.0입니다. 아직 안드로이드 앱을 먼저 만들어야하기 때문에 아직 시도하지 않았습니다.

Answer 1

너비와 높이를 사용하여 이미지에 스타일을 추가 해보십시오.

이미지를 다운로드하고 크기를 확인한 다음 다시 렌더링하면 사용자 환경이 좋지 않을 수 있습니다. 치수를 지정해야합니다.

Answer 2

이미지의 높이와 너비를 지정하십시오.

<Image source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} style={{ height: 50, width: 50 }}/> 

Answer 3

고맙습니다. 방금 스타일을 추가하고 {{height : 30, width : 30}} 크기로 지정 했으므로 이제 작동합니다!