react-native - 在 react-native 中将本地镜像 uri 作为 Prop 传递

Question

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

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

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

我还尝试将 uri 声明为 PropTypes.func，然后执行

<Image source={{ source }} />

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

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