标签: react-native-image

我正在使用react-native-camera,我无法将图像作为二进制数据获取react-native.我需要这个能够将图像上传到我们的后端.我唯一能得到的就是uri的图像,然后可能将其发送FormData到服务器,但不建议这样做,因为这需要对我们的后端进行一些基础设施更改.

有没有人知道关于这个问题的解决方案或一些提示？

非常感谢任何想法或帮助.

我目前使用的是 RN 41.2，我对从 url 调整图像大小有疑问。url 文件可能会变得非常大，通常在 2000x2000 左右，我想将它们显示得更小，大概在 25​​x25 左右。

'android only' resizeMethod 是否有等效的 iOS Image 道具？

当 resizeMethod='resize' 时，它会在解码前更改大编码图像的大小，因此图像几乎立即以较小的尺寸显示，这很棒。

但是对于iOS，我使用resizeMode（包含，封面等）并且它正确显示图像，但图像实际显示总是需要一些时间，这是完全可以理解的，只是很烦人。

我在这里错过了什么吗？似乎 resizeMode 应该做与 resizeMethod 相同的事情，但显然没有

我的项目中有这组图像。

this.state.destinations = [{
    "destinationId": "001",
    "img": "../../assets/img/destinations/001.png"
  },
  {
    "destinationId": "002",
    "img": "../../assets/img/destinations/002.png"
  },
  {
    "destinationId": "003",
    "img": "../../assets/img/destinations/003.png"
  }]
}

我试图在 Image 组件中的 View 中重复它们中的每一个，如下所示：

render() {

    var {navigate} = this.props.navigation;

    return (
        <LinearGradient 
          colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={{flex:1}}>
            <ScrollView>
              {
                <View style={{paddingTop: 24}}>
                  {
                    this.state.destinations.map(dest => {
                      return <Image style={{height: 200, width: 600}} key={dest.destinationId} source={require(dest.img)} resizeMode="contain" />
                    })
                  }
                </View>
              }
            </ScrollView>
        </LinearGradient>
    );
  }

但是当我尝试运行时，我的手机出现了一些疯狂的错误：

我试图在 expo 中运行该应用程序，我只是在 react-native 模式下开发它，而不是 react-native-init 模式。

我有一个目录，用于存储使用相机拍摄的图像。为了保存图像，我正在使用RNFS。我正在使用react-native-photo-browser。

库本身没有任何选项可以从库中删除项目。所以我正在努力实现它

export default class GridGallery extends React.Component{

    static navigationOptions = {
      title: 'Image Gallery',
    };

    constructor(props) {
        super(props)
        this.state = {
          filesList : [],
          mediaSelected: [],
          base64URI: null,
          galleryList: []
        }
    }

    componentDidMount(){
        FileList.list((files) => {

            if(files != null) {

                this.fileUrl = files[0].path;

                files = files.sort((a, b) => {

                    if (a.ctime < b.ctime)
                        return 1;
                    if (a.ctime > b.ctime)
                        return -1;
                    return 0;
                });

                this.setState({
                    filesList: files
                });
            }
            console.warn(this.state.filesList);
            this.getFiles();
        });
      }

    getFiles(){
      //console.warn(this.state.filesList); …

我在反应本机中的图像组件有问题。我想在某个正方形中显示图像的特定部分。铁：

假设我的图像分辨率为：1280x720

private someImage = require('../Assets/someImage.jpg');

我想以方形组件显示此图像（大小恒定）

<View style={{width: 64, height: 64}}>
   <Image source={this.someImage}
          style={{position: 'absolute', top: 0, left: 0 }} />
</View>

第一个问题来了：图像超出了正方形。如何仅显示图像的一部分（但具有原始分辨率）。

第二个问题是：有没有办法显示我的图像的特定片段？如果我设置顶部：-64，左侧：-64，那就是男人，我希望看到原始图像对角线移动约 64 像素。

你好,世界,

我试图在React-native Doc上裁剪像解释一样的图像

<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>

但它不起作用图像不被裁剪.

任何的想法？

我刚刚安装了 react-native-image-crop。当我试图在真正的 iPhone 上拍照时，我收到了一个非常奇怪的错误。'App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.'. 这是因为我使用地铁建设者吗？或者别的什么？

我的信息.plist：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

来自 reactjs 我期待图像组件上的“alt”属性，如果无法加载图像，它将显示文本。我在这里阅读了文档，我发现最接近的是 on error 事件。

React Native 图像组件中是否有等于 alt 的属性？如果我没有 alt 属性，用默认文本替换图像的最简单方法是什么？

在我的 React Native 项目文件夹中，我有保存组件的 src 文件，以及一些我想在 iOS 和 Android 上使用的图像。如果我使用这个：

<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />

然后图像就完美加载了。但是，图像标签中的源将在用户拍照时动态创建。这段代码：

<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />

不起作用。没有抛出错误，但没有显示图像。我确信我走在正确的轨道上，因为当我用道具 ( ) 替换源时，它会使用相同的代码返回相机拍摄的图像并存储在设备上，<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />但对于静态图像，它不会发生。建议？

当我打开配置文件选项卡时，它会从 URL 加载图像（配置文件图像），如果用户想要更改他的图像，他可以，但是当他更改图像时，服务器上的图像已更改，但在应用程序上它不会更改，但如果我刷新了它确实改变的应用程序。

当用户登录他在 URL 上有图像时，URL 不会改变，当他更新图像时，URL 是相同的，但图片是不同的。

<Image style={{height: 70, width:70,borderRadius: 35}} source={{uri:'http://********************/'+GLOBAL.api_token}} />

我试图在图像上放置一个图标，但它所做的只是将图像向下推到页面上。

这是它目前的样子：

如您所见，我正在尝试将蓝色后退箭头放在该图像的顶部。

这是我的标记的样子：

<ScrollView style={ styles.container }>
  <View style={ styles.coverImageContainer }>
    <Image
      style={ styles.coverImage }
      source={ require('./img.jpg') }
    >
      <View>
        <Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} />
      </View>
    </Image>
  </View>
  ...

这是我的风格：

container: {
  backgroundColor: '#f9f9f9',
  flex: 1,
},

coverImageContainer: {
  backgroundColor: '#000',
},

coverImage: {
  width: null,
  height: 170,
  resizeMode: 'cover',
  opacity: 0.7,
  flex: 1,
},

我究竟做错了什么？

如果我去掉图标，图像会显示我想要的样子，但我也希望它上面有后退按钮图标。这是没有图标的样子：

我试图从本地文件显示图像,所以我尝试这样做

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}}
    style={{height:150,width:150}}
/>

我的容器组件似乎获得高度和宽度但图像不加载.所以我试试这个

<Image 
    source={require('../../assets/img_src/BTI.jpg')}
    style={{height:150,width:150}}
/>

它工作得很好,不幸的是据我所知我不能使用这个实现,如果我想先操作地址文件并将其存储到变量.例:

const imgSrc = `../../assets/${data.image}`;

data.image ='img_src/BTI.jpg'.我尝试在android工作室中删除我的android模拟器上的所有数据,但结果仍然相同.难道我做错了什么？这有更好的实施吗？

非常感谢 :)

我为我的应用程序使用了基于会话的身份验证系统，但是我的API调用工作得很好，但是，当使用以下请求图像时：

<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

该请求未通过身份验证

但是，需要身份验证才能检索图像。您将如何处理？似乎没有关于此的任何文档