リアクションネイティブイメージ - 未知の名前付きモジュール '../img/2.jpeg'

Question

私はreact-reduxチュートリアルコードを修正しようとしています。私はローカルに格納されている画像をロードしようとしており、パスはオブジェクトに保存されています。 '../img/3.jpeg'

：

... 
{ 
    "id": 2, 
    "title": "Redux", 
    "subtitle": "A State of Mind", 
    "img": "../img/3.jpeg", 
    "description": "Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test." 
    }, 
... 

私は次のエラーを持っている

不明という名前のモジュール（Iシミュレータ数回再起動しました）ここにコンテナ（eslintも - 予期しない要求（）があります）

import React, { Component } from 'react'; 
import { 
    Text, 
    TouchableWithoutFeedback, 
    View, 
    LayoutAnimation, 
    Image 
} from 'react-native'; 
import { connect } from 'react-redux'; 
import { CardSection } from './common'; 
import * as actions from '../actions'; 

class ListItem extends Component { 
    componentWillUpdate() { 
    LayoutAnimation.spring(); 
    } 

    renderDescription() { 
    const { library, expanded } = this.props; 

    if (expanded) { 
     return (
     <CardSection> 
      <Image 
      source={require(library.img)} 
      style={styles.imageStyle} 
      /> 
      <View> 
      <Text>{library.subtitle}</Text> 
      <Text style={{ flex: 1 }}> 
       {library.description} 
      </Text> 
      </View> 
     </CardSection> 
    ); 
    } 
    } 

    render() { 
    const { titleStyle } = styles; 
    const { id, title } = this.props.library; 

    return (
     <TouchableWithoutFeedback 
     onPress={() => this.props.selectLibrary(id)} 
     > 
     <View> 
      <CardSection> 
      <Text style={titleStyle}> 
       {title} 
      </Text> 
      </CardSection> 
      {this.renderDescription()} 
     </View> 
     </TouchableWithoutFeedback> 
    ); 
    } 
} 

const styles = { 
    titleStyle: { 
    fontSize: 18, 
    paddingLeft: 15 
    }, 
    descriptionStyle: { 
    paddingLeft: 10, 
    paddingRight: 10 
    }, 
    imageStyle: { 
    height: 100, 
    width: 100, 
    backgroundColor: 'black' 
    } 
}; 

const mapStateToProps = (state, ownProps) => { 
    const expanded = state.selectedLibraryId === ownProps.library.id; 

    return { expanded }; 
}; 

export default connect(mapStateToProps, actions)(ListItem); 

イメージは別として、すべてが動作しています罰金 - イメージだけがそこにはありません。

Answer 1

あなたが動的にいずれか、ネイティブに反応静的にそれを行う、またはこのようURIを使用して画像を必要とすることはできません。

source={{ uri: library.img }} 

しかし、あなたはこのパス

anroid/app/src/main/res/drawable 

の下であなたのイメージを配置する必要が考慮して取ります

drawableフォルダが作成されていない場合は作成してください。

と../

を削除するには、JSONファイルを更新し、この問題を参照してください：https://github.com/facebook/react-native/issues/2481