React Родной: загрузить

Question

Я пишу простую программу iOS, чтобы показать изображение с помощью React Native.

'use strict'; 

var React = require('react-native'); 
var { 
    Image 
} = React; 

var styles = React.StyleSheet.create({ 

    base: { 
    height: 400, 
    width: 400 
} 
}); 

class SimpleApp extends React.Component { 
    render() { 
    return (
    <Image 
    style={styles.base} 
    source={require('image!k')} 
    //source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}} 
     /> 
    ) 
    } 
} 

React.AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

Но я получил сообщение от экрана IPad:

"Failed to print error:","'undefined' is not an object (evaluating 'stackString.split')" 

Когда я изменить код, чтобы использовать URL изображения

//source={require('image!k')} 
source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}} 

Я только получить красную границу прямоугольника.

Когда я использую другой файл js, все работает хорошо. «Hello World» может отображаться на экране iPad.

'use strict'; 

var React = require('react-native'); 
var { 
    Text, 

} = React; 


class SimpleApp extends React.Component { 
    render() { 
    return (

     <Text>Hello World</Text> 

    ) 
    } 
} 

React.AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

Answer 1

Убедитесь, что используете последнюю версию React Native. С Реагировать Native 0.4.4 следующих работ:

Местных изображения

<Image 
    style={styles.base} 
    source={require('image!tabnav_settings')} 
    /> 

Также убедитесь, что вы добавили изображение, которое вы хотите использовать для ваших активов изображения:

Удаленное изображение

<Image 
    style={styles.base} 
    source={{uri: 'http://i.stack.imgur.com/DfkfD.png'}} 
    /> 

Answer 2

Как отметил @potench в комментариях, загрузка статических изображений с расширением .jpg в настоящее время не работает. Но если вы просто переименуете свой jpg в png, все будет хорошо. См. Также https://github.com/facebook/react-native/issues/521