Question

我是新来的反应者，我正在编写一个应用程序，该程序将本地文件系统中的图像加载到平面列表中以提供图像选择器。我将图像加载到组件did Mount方法中的数组中，并将其作为数据源添加到状态中，以便在加载图像时触发渲染。

我尝试了require关键字，这给出了语法错误，我也试图将图像加载为uri，但这会呈现空白布局。

在第一个图片加载的第53栏给我一个语法错误-require的右括号

componentDidMount() {
    var that = this;
    let items: [{"key": "r", "image": require("./img/image1.jpg")},
                {"key": "b", "image": require("./img/image2.jpg")},
                {"key": "j", "image": require("./img/image3.jpg")}
                ];
    that.setState({
        dataSource: items,
    });
 }

在我正在使用的平面列表中

<View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
                            <Image style={styles.imageThumbnail} source={{item.image} />
                        </View>

我得到的错误是

SyntaxError: /Users/xxxxxxx/react-native/simpleproject/screens/HomeScreen.js: Unexpected token (23:49)

  21 |     componentDidMount() {
  22 |         var that = this;
> 23 |         let items: [{"key": "r", "image": require("./img/image1.jpg")},
     |                                                  ^
  24 |                     {"key": "b", "image": require("./img/image2.jpg")},
  25 |                     {"key": "j", "image": require("./img/image3.jpg")}
  26 |                     ];

据我所知，这是正确的语法。

Answer 1

您正在使用:初始化商品。

初始化类似项目

let items = [{"key": "r", "image": require("./img/image1.jpg")},
   {"key": "b", "image": require("./img/image2.jpg")},
   {"key": "j", "image": require("./img/image3.jpg")}
 ];

Demo

Answer 2

您可能需要一个nodejs服务器，以便可以在您的react应用程序的系统上使用file protocol。看看这个answer。

反应-将静态图像加载到平面列表中

2 个答案: