source.uri 为空，来自 aws on react native答案

【问题标题】：source.uri is null coming from aws on react nativesource.uri 为空，来自 aws on react native
【发布时间】：2018-03-26 01:08:15
【问题描述】：

我在 aws 上获取图像，当我通过运行代码时收到警告错误，即 source.uri 为空并且图像不会显示。我从服务器获取图像，因为我可以在调试器中看到图像，但它不会显示在代码中。

这是我的动作文件 src/actions/item.js

import { HOST } from '../constants';
import { normalizeItems, normalizeItem } from '../utils';
  export const SET_ITEMS = 'SET_ITEMS';
  export function setItems(items) {
      return {
           type: SET_ITEMS,
           items
      }
 }
 export function getItems() {
   return (dispatch, getState) => {
     return fetch(`${HOST}/api/v1/items`)
     .then(response => response.json())
     .then(json => {
      console.log("getItems", json);

      if (json.is_success) {
        dispatch(setItems(normalizeItems(json.items)));
     } else {
       alert(json.error);
     }
   })
   .catch(e => alert(e));
  }
 }

这个调试器的图像显示我在那里有图像

这是我的减速器文件 src/reducers/item.js

import { SET_ITEMS,SET_ITEM } from '../actions/item';
const initialState = {
    items: [],
};
export default function(state = initialState, action) {
if (action.type === SET_ITEMS) {
    return {
    ...state,
    items: action.items
    }
}

我在这个文件中渲染我的代码 src/components/MainScreen/ExploreTab.js

class ExploreTab extends Component {
componentWillMount() {
  this.props.getItems();
}
onPress(item) {
  this.props.navigate({ routeName: "Item", params: { item: item } });
}
render() {
  const { items, filter } = this.props;
   return (
    <FlatList
    style={styles.container}
    data = { items }
    renderItem={({item}) =>
      <TouchableOpacity onPress={() => this.onPress(item)} style={styles.item}>
      <Image style={styles.image} source = {{uri: item.image}} />
         <Text style = {styles.title}>{`$${item.price} ${item.instant ? '???? ' : ''}${item.title}`}</Text>
         <Text>{`${item.itemCategory} - ${item.itemCondition} `}</Text>
        </TouchableOpacity>
      }
     keyExtractor={(item, index) => item.id}
     />
   );
  }
}
 const mapStateToProps = state => ({
    items: state.item.items
  });
 const mapDispatchToProps = dispatch => ({
     navigate: (route) => dispatch(navigate(route)),
     getItems: () => dispatch(getItems()),
  });

如果我改变这一行

<Image style={styles.image} source = {{uri: item.image}} />

对此我会看到图像

<Image style={styles.image} source = {{uri: 'https://s3.us-east-2.amazonaws.com/borroup/photos/images/1/medium/Screen_Shot_2018-03-22_at_10.48.28_PM.png'}} />

【问题讨论】：

标签： node.js reactjs react-native react-router react-redux

【解决方案1】：

在 src/utils/index.js 中

我设置为

import { HOST } from '../constants';

export function normalizeItems(items) {
 return items.map(item => {
  return{
    id: item.id || '',
    title: item.item_name ||'',
    image: `${HOST}${item.image}` ||'',
    itemCategory: item.item_category ||'',
    itemCondition: item.item_condition ||'',
    price: item.price ||'',
    instant: item.instant ||'',
   }
 })
}

所以我不得不改变

image: `${HOST}${item.image}` ||'',

为此并为我工作

image: `${item.image}` ||'',

【讨论】：