React native：componentDidMount无法显示获取数据

Question

嗨，我正在为一家公司制定编程挑战，我必须开发一种像宠物反应本机应用程序的火种，我被困在我无法看到任何图像的地方，在服务器上，我在呼唤componentDidMount中的正确终点。我正在遵循本教程https://www.youtube.com/watch?v=mmHywzVkKn8，我很反应/反应原生土地，我有一些angualar2的经验，我学会了使用async / await。从我有限的理解 这个问题的真正原因是图像没有及时呈现，因为视图确实提前初始化，我正在使用它开发iOS应用程序。

import React from 'react';
import {StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder} from 'react-native';


const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;
export default class Pets extends React.Component {
    constructor(){
      super();
      this.position = new Animated.ValueXY()
      this.state = { 
        data: [],
        currentIndex: 0
      };

    }


    async componentDidMount(){
      const response = await fetch("https://s3-us-west-2.amazonaws.com/cozi-interview-dev/pets.json")
      const json = await response.json();
      this.setState({ data: json });
      }

      componentWillMount() {
        this.PanResponder = PanResponder.create({

          onStartShouldSetPanResponder: (evt, gestureState) => true,
          onPanResponderMove: (evt, gestureState) => {

            this.position.setValue({ x: gestureState.dx, y: gestureState.dy })
          },
          onPanResponderRelease: (evt, gestureState) => {

          }
        })
      }

      renderPets = () => {

        return this.state['data'].map((item, i) => {


          if (i < this.state.currentIndex) {
            return null
          }
          else if (i == this.state.currentIndex) {

            return (
              <Animated.View
                {...this.PanResponder.panHandlers}
                key={item.id} style={[this.rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}>
                <Animated.View style={{ opacity: this.likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
                  <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

                </Animated.View>

                <Animated.View style={{ opacity: this.dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
                  <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

                </Animated.View>

                <Image
                  style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
                  source={item.uri} />

              </Animated.View>
            )
          }
          else {
            return (
              <Animated.View

                key={item.id} style={[{
                  opacity: this.nextCardOpacity,
                  transform: [{ scale: this.nextCardScale }],
                  height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'
                }]}>
                <Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
                  <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

                </Animated.View>

                <Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
                  <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

                </Animated.View>

                <Image
                  style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
                  source={item.uri} />

              </Animated.View>
            )
          }
        }).reverse()
      }

      render() {
        return (
          <View style={{ flex: 1 }}>
            <View style={{ height: 60 }}>

            </View>
            <View style={{ flex: 1 }}>
              {this.renderPets()}
            </View>
            <View style={{ height: 60 }}>

            </View>


          </View>

        );
      }


       }
      const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

Answer 1

这是错误的source={item.uri}做这个source={{uri:item.img}}。编辑你的图像源如下，然后Image将呈现。

       <Image
            style={{
              flex: 1,
              height: null,
              width: null,
              resizeMode: 'cover',
              borderRadius: 20,
            }}
            source={{uri:item.img}} <---This is the way add image
          />