繁体   English   中英

如何在React Native中将文本URL从Firebase存储转换为图像?

How to convert a text URL to an image from Firebase Storage in React Native?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在Expo中构建一个应用程序,我想拥有一个包含图像和文本的ListItem列表,它们应该来自Database + Storage的组合。 我已经设法将Firebase数据库连接到我的应用程序,并且可以从数据库检索文本(请参见下面的代码),但是我无法将URL从数据库连接到存储。

到目前为止,我可以将数据库中的URL(gs:// ...)打印为“文本”,但是我无法将该URL转换为应该来自Storage的图像。

我也尝试过通过此链接跟踪信息,但是我销毁了整个代码,因此我进行了备份。 谁能帮我从存储将URL链接转换为图像?

我的数据库如下所示: 在此处输入图片说明

从数据库中检索文本的代码在这里:

 'use strict'; import React from 'react'; import { ListView, StyleSheet, Text, View, TouchableHighlight, AlertIOS, } from 'react-native'; import { Constants } from 'expo'; import firebase from 'firebase'; // 4.10.1 const StatusBar = require('../Firebase/StatusBar'); const ActionButton = require('../Firebase/ActionButton'); const ListItem = require('../Firebase/ListItem'); const styles = require('../Firebase/styles.js') // Initialize Firebase const firebaseConfig = { apiKey: "AIzxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "checkup-7b62e.firebaseapp.com", databaseURL: "https://checkup-7b62e.firebaseio.com", projectId: "checkup-7b62e", storageBucket: "checkup-7b62e.appspot.com", messagingSenderId: "00000000000" }; const firebaseApp = firebase.initializeApp(firebaseConfig); export default class FirebaseReactNativeSample extends React.Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }) }; this.itemsRef = this.getRef().child('items'); } getRef() { return firebaseApp.database().ref(); } listenForItems(itemsRef) { itemsRef.on('value', (snap) => { // get children as an array var items = []; snap.forEach((child) => { items.push({ title: child.val().title, subtitle: child.val().subtitle, data: child.val().data, luna: child.val().luna, ora: child.val().ora, minutele: child.val().minutele, url: child.val().url, _key: child.key }); }); this.setState({ dataSource: this.state.dataSource.cloneWithRows(items) }); }); } componentDidMount() { this.listenForItems(this.itemsRef); } render() { return ( < View style = { styles.container } > < StatusBar title = "Events" / > < ListView dataSource = { this.state.dataSource } renderRow = { this._renderItem.bind(this) } enableEmptySections = { true } style = { styles.listview } /> < ActionButton onPress = { this._addItem.bind(this) } title = "Add" / > < /View> ) } _addItem() { AlertIOS.prompt( 'Add New Item', null, [{ text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' }, { text: 'Add', onPress: (text) => { this.itemsRef.push({ title: text }) } }, ], 'plain-text' ); } _renderItem(item) { const onPress = () => { AlertIOS.alert( 'Complete', null, [{ text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove() }, { text: 'Cancel', onPress: (text) => console.log('Cancelled') } ] ); }; return ( < ListItem item = { item } onPress = { onPress } /> ); } } //AppRegistry.registerComponent('FirebaseReactNativeSample', () => FirebaseReactNativeSample); 

ListView.js文件在这里:

 import React, { Component } from 'react'; import ReactNative from 'react-native'; const styles = require('./styles.js') const { View, TouchableHighlight, Text, Image } = ReactNative; export default class ListItem extends Component { render() { return ( //<TouchableHighlight onPress={this.props.onPress}> < View style = { styles.li_row } > < View style = { styles.li_column } > < Text style = { { fontWeight: 'bold', fontWeight: 'bold', textAlign: 'center', fontSize: 40 } } > { this.props.item.data } < /Text> < Text style = { styles.liText } > { this.props.item.luna } < /Text> < Text style = { styles.liText } > -- -- -- -- -- -- < /Text> < View style = { styles.li_row } > < Text style = { styles.liText } > { this.props.item.ora } < /Text> < Text style = { styles.liText } >: < /Text> < Text style = { styles.liText } > { this.props.item.minutele } < /Text> < /View> < Text style = { styles.liText } > { this.props.item.url } < /Text> < /View> < View style = { styles.li_column } > < Text style = { styles.liText } > { this.props.item.title } < /Text> < Text style = { styles.liText } > { this.props.item.subtitle } < /Text> < /View> < /View> //</TouchableHighlight> ); } } module.exports = ListItem; 

我试图将URL直接添加到uri中:

 < Image source = { { uri: this.props.url } } style = { { height: 200 } } /> 

但是我得到:

无法添加没有YogaNode的孩子。

因此,我假设我需要在代码中的某个地方包含firebase.storage(),但是我不知道在哪里。

问题暂未有回复.您可以查看右边的相关问题.
1 如何在watchKit中将URL转换为图像

我正在开发监视应用程序,其中我要从iOS传递图像URL数组进行监视,并且在监视中我想在表格视图中显示图像,但图像未显示。 ...

2019-10-08 07:10:48 0 23   swift
4 如何在android中将图像URL转换为文件

我在我的项目中遇到了这个问题,我需要将图像作为文件从 URL 获取图像(例如:图像 URL 这个url 需要转换为文件而不下载图像),意味着图像 URL 需要转换文件然后它传递给 server.Analysized 但我没有得到任何答案, 从这个响应“templateUrl”需要转换文件 ...

6 如何在C#中将图像转换为文本[关闭]

在我的项目之一中,我需要将图像转换为文本。 谷歌搜索后发现Tessaract可以做到这一点。 但是以某种方式我无法在我的应用程序中使用它。 因此,除了“ Tessaract Engine”之外,还有其他方法可以将图像转换为文本吗? 请帮助。 ...

2012-06-14 12:19:20 2 6055   c#/ ocr
7 React Native-如何在Android中将图像转换为Base64,反之亦然

我创建了一个可以拍照并上传到AWS s3的应用程序。 一旦捕获了这些,就需要对它们进行哈希处理。 在那里,我使用了Base64哈希方法,并且捕获的照片被加密了。 但是我无法打开它,也不确定是否以适当的方式完成了该操作。 在上传之前,我想取消哈希这些。 也就是说,它们必须作为散列图像 ...

8 如何在React Native中将base64字符串图像转换为blob?

我正在尝试使用React-Native-Camera捕获图像并上传到服务器,捕获的响应仅提供base64图像和相对uri路径到系统的缓存。 我曾经使用像blob-util这样的软件包将图像转换为网站中的blob,这些软件包不适用于React-native。 在我四处搜索时,我发现大多数人 ...

9 如何在Vue js中将相对图像url转换为绝对图像url?

我调用了我的 API 来获取相对路径。 我想通过添加域名使其成为绝对路径。 我怎样才能在 Vue js 中做到这一点? item.settings.image.path是对我的 API 的调用并返回类似/storage/uploads/my_picture.jpg 。 我在网上找不到任何资源 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM