在 react-native 中将本地图像 uri 作为道具传递

Question

我正在尝试将图像的 uri 作为道具传递，以便我可以在 react-native 上多次重复使用它。但是，这个当前的解决方案提示我 require 应该使用字符串文字。

const ImageButton = ({ source }) => (
    <Image source={require({ source })} />
);

ImageButton.propTypes = {
     uri: PropTypes.string,
};

我也尝试过将 uri 声明为 PropTypes.func，然后做

<Image source={{ source }} />

但图像没有出现。图像 uri 道具的正确实现是什么？

Answer 1

您需要为需要图像做单独的对象，因为动态定义的字符串是不可能的。

例如：

const assets = {
  imageButton: require('./assets/button.jpg'),
};

const ImageButton = (source) => {
  <Image source={assets[source]} />
}

class MyComponent extends Component(props) {
  render() {
    return (
      <ImageButton source={'imageButton'} />
    )
  }  
}