Question

我正在尝试通过发送标题和图片网址来渲染基本组件的图片列表。

如果我像这样渲染图像，一切正常：

 <Image source={require('../assets/images/myImage.png')} />

当我尝试从道具渲染图像时，问题就出现了：

class ListItem extends Component {
    render() {
      return (
        <View>
          <Text>{this.props.title}<Text>
          <Image source={require(this.props.imageUri)} />
        </View>
      );
    }
};

ListItem.propTypes = {
  title: PropTypes.string.isRequired,
  imageUri: PropTypes.string.isRequired,
};

结果，我收到了下一个错误：

对require的调用只需要1个字符串文字参数，但是这个被发现：require(this.props.imageUri)。

我还尝试使用uri

渲染图像

<Image source={{uri: this.props.imageUri}} />

package.js

"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",

Answer 1

如果您使用/etc/environment远程图像，它们可以是动态的，但需要本地图像需要在构建时解析路径，因此它们无法实现。创建已知路径的哈希：

uri

以他们的名字引用他们：

const imageNames = {
   apple: require('./images/apple.png'),
   orange: require('./images/orange.png'),
};

在道具的React原生中加载图像

1 个答案: