需要 react-native 0.14.2 中的图像答案

【问题标题】：requiring image in react-native 0.14.2需要 react-native 0.14.2 中的图像
【发布时间】：2015-11-30 12:51:40
【问题描述】：

这样做我的代码可以正常工作

<Image
source={require('../../assets/images/music_star.png')}
style={styles.musicStar}
/>

但是这样做会给我一个错误

let imgSource = '../../assets/images/music_star.png';
<Image
source={require(imgSource)}
style={styles.musicStar}
/>

我收到一个错误：

需要未知模块“../../assets/images/music_star.png”

我做错了什么？ react-native 0.14.2 如何要求存储在变量中的图像？

【问题讨论】：

标签： react-native

【解决方案1】：

您可以阅读更多 in the docs 但基本上，为了使其工作，必须静态知道 require 中的图像名称：

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');

要将图像从父级传递给子级，您应该在父级中要求它：

/**
 * The entry point for the iOS app.
 */
import React, {
  AppRegistry,
  Component,
  Image,
  View,
} from 'react-native';

class Child extends Component {
  render() {
    return (
      <Image source={this.props.image} />
    )
  }
}

export default class Parent extends Component {
  render() {
    return (
      <View>
        <Child image={require('./test.png')} />
      </View>
    );
  }
}

AppRegistry.registerComponent('App', () => Parent);

【讨论】：

有没有办法通过道具将图像静态路径从父级传递给子级？