将静态图像快速提供给 React-native 应用程序答案

【问题标题】：Express serve static image to React-native app将静态图像快速提供给 React-native 应用程序
【发布时间】：2018-11-20 04:38:46
【问题描述】：

我正在尝试将来自 node js express 的静态图像提供给我的 react 本机应用程序。

我正在尝试使用 express.static 但出现错误

道具类型失败：提供给图片的道具来源无效。

如何将静态图片提供给 react-native 应用？

文件夹结构：

--public
-image.png
-app.js

app.js

const app = express();

app.use(express.static('/public'));

app.get('/', (req, res) => res.status(200).send({
  message: 'API Called',
}));

module.exports = app;

HomePage.js

import React, {Component} from 'react';
import {AppRegistry, Text, View, TextInput, Button, StyleSheet, Image, } from 'react-native';

export default class HomePage extends Component{

  constructor(){
    super();

  render(){
    return(
      <View style={styles.ViewStyle}>
        <Image
          style={styles.Image}
          //{uri: this.getImage(item.teampicture1)}
          source={{uri: 'http://192.168.1.10:8000/image.png'}}
        /> 

      </View>
    );
  }
}

【问题讨论】：

标签： node.js image reactjs express react-native

【解决方案1】：

我发现我必须使用它

app.use('/image', express.static(__dirname + '/public'));

在 app.js 中。

然后为了显示图像，我必须使用公共文件夹中的图像名称调用图像路由。

source={{uri: 'http://192.168.1.10:8000/image/image.png'}}

【讨论】：