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

Question

我正在尝试将图像的uri作为道具传递，以便我可以在反应本机上多次重用它。但是，当前的解决方案提示我要求应该使用字符串文字。

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'} />
    )
  }  
}