升级本机版本后图像未呈现

Question

I created a new project in react-native 0.61.5 . My old project was runnning on 0.49.5 .

My images in my view are no longer rendering, this is what I'm getting:

After porting all my code from my old project to my new project and installing the necessary dependencies everything worked as expected with the exception of the rendering of the image. The image I'm using comes from a URI ( URI still working in browser ), and I'm fetching a new image every time an event is executing (swiping right)

Here is the code in question:

  renderCard = (card, index) => {
    // https://source.unsplash.com/featured/?{dog}
    return (
      <View style={styles.card}>
        <Text style={styles.text}>card: {card} index: {index}</Text>
        <Image style={{width: 400, height: 400}} source={{uri: 'https://source.unsplash.com/400x400/?dog/' + index}}/>
      </View>
    )
  };

Here is my render method that makes the call to the renderCard method above:

  render () {
    return (

      <View style={styles.container}>
        <View style={[styles.swiper]}>
        <Swiper
          ref={swiper => {
            this.swiper = swiper
          }}
          onSwiped={() => this.onSwiped('general')}
          onSwipedLeft={() => this.onSwiped('left')}
          onSwipedRight={() => this.onSwiped('right')}
          onSwipedTop={() => this.onSwiped('top')}
          onSwipedBottom={() => this.onSwiped('bottom')}
          onTapCard={this.swipeLeft}
          cards={this.state.cards}
          cardIndex={this.state.cardIndex}
          cardVerticalMargin     = {100}
          renderCard={this.renderCard}
          onSwipedAll={this.onSwipedAllCards}
          useViewOverflow    = {false}
          stackSize={3}
          stackSeparation={15}

          overlayLabels={{
            bottom: {
              title: 'BLEAH',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            },
            left: {
              title: 'NOPEE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: -30
                }
              }
            },
            right: {
              title: 'LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: 30
                }
              }
            },
            top: {
              title: 'SUPER LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            }
          }}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard
        >


        </Swiper>
        </View>
        <View style={[styles.rateBoxes]}>
          <Slider
            style={{width: 200, height: 40}}
            minimumValue={5}
            maximumValue={10}
          />
        </View>
      </View>
    )
  }
}

Update 1

I modified my code to try and render an image outside the Swiper method as such:

render () {
    return (

      <View style={styles.container}>
        <View style={styles.card}>
        <Text style={styles.text}>card:</Text>
        <Image style={{width: 400, height: 400}} source={{uri: 'https://source.unsplash.com/400x400/?dog/' + "1"}}/>
      </View>
      </View>
    )
  }
}

Interestingly enough, no image was rendered , This was what I got:

And here is my stylesheet :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4FD0E9'
  },
  swiper:{
    flex:1,
  },
  rateBoxes:{
    alignItems: 'center',
    padding: 10
  },
  card: {
    flex: 1,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: '#E8E8E8',
    justifyContent: 'center',
    backgroundColor: 'white'
  },
  text: {
    textAlign: 'center',
    fontSize: 50,
    backgroundColor: 'transparent'
  },
  done: {
    textAlign: 'center',
    fontSize: 30,
    color: 'white',
    backgroundColor: 'transparent'
  }
})

Update 2

The package I am using for swiper is called react-native-deck-swiper. Here is my package.json:

{
  "name": "DogTinder",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-deck-swiper": "^1.6.7",
    "react-native-view-overflow": "0.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/runtime": "^7.7.4",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.7.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

Try to replace the code with

renderCard = (card, index) => {
  const imageUri = 'https://source.unsplash.com/400x400/?dog/' + index;
  return (
    <View style={styles.card}>
      <Text style={styles.text}>card: {card} index: {index}</Text>
      <Image style={{width: 400, height: 400}} source={{uri: imageUri }}/>
    </View>
  )
};

Answer 2

It appears your emulator is not connected to the internet:

To double check your emulator is connected to the internet, open a browser and try to go to Google.

If no webpage is diplayed try the following to solve your issue:

1. On your emulator go to settings -> turn off wifi and turn off data and turn on again and it will fix in some cases

2. Completely close out of your emulator and re-start it.