Question

我试图将图像的uri作为prop传递，因此我可以在react-native上多次重复使用它。但是，这个当前的解决方案提示我需要使用字符串文字。

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

传递本地图像uri作为反应原生的道具

1 个答案: