Question

我想将本地存储的图像渲染到ListView中。由于应用程序的打包方式，我似乎无法使用source = {require（category.image）}。使用source = {{uri：category.image}}不会导致我的应用程序崩溃，但也不会加载图像。这是我的React Native类：

var Categories = React.createClass({

  getInitialState: function() {

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows([
        {'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
{'name':'Test', 'image':'./images/categories/test.jpg'},
      ]),
    };
  },

  renderCategory: function(category) {

    return (

      <View style={styles.container}>
        <Image source={{uri: category.image}}>

          <View style={styles.backdropView}>
            <Text style={styles.headline}>
              {category.name}
            </Text>
          </View>

        </Image>
      </View>
    );
  },

  render: function() {

    return (

      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderCategory} />
    );
  },
});

如何在不对其进行硬编码的情况下将图像添加到页面中？

Answer 1

React Native打包程序将预处理您的代码并查找指向图像的require语句，并将这些语句与您的应用程序捆绑在一起。由于这是在编译时而非运行时完成的，因此您无法动态地需要它们。

如果您必须这样做，那么我建议您使用远程图片或将其添加到Images.xcassets并使用{uri: 'asset_name'}代替。另一种方法是在启动时使用一堆require创建一个数组或对象，然后动态使用该内容。

Answer 2

最好的办法是远程托管它们并将它们调用到缓存中并使用其中一个缓存库来处理资产。

https://github.com/llanox/react-native-assets

这可以帮助您完成此过程。您可以使用相同的概念找到以其他方式执行此操作的创造性方法。

另一个答案中建议的其他选项是使用Images.xcassets

动态添加本地存储的图像到列表视图

2 个答案: