升级反应本机版本后图像不渲染

Question

我在 react-native 0.61.5 中创建了一个新项目。我的旧项目在 0.49.5 上运行。

我的视图中的图像不再呈现，这就是我得到的结果：

将所有代码从我的旧项目移植到我的新项目并安装必要的依赖项后，除了图像渲染外，一切都按预期工作。我正在使用的图像来自一个 URI（URI 仍在浏览器中工作），每次事件执行时我都在获取一个新图像（向右滑动）

这里是有问题的代码：

  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>
    )
  };

这是调用上面的 renderCard 方法的渲染方法：

  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>
    )
  }
}

更新 1

我修改了我的代码以尝试在 Swiper 方法之外渲染图像：

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>
    )
  }
}

有趣的是，没有图像被渲染，这就是我得到的：

这是我的 样式表:

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'
  }
})

更新 2

我用于 swiper 的包叫做 react-native-deck-swiper。这是我的 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

尝试将代码替换为

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

您的模拟器似乎没有连接到互联网：

要仔细检查您的模拟器是否已连接到互联网，请打开浏览器并尝试转到 Google。

如果没有显示任何网页请尝试以下方法解决您的问题：

在您的模拟器上转到设置 -> 关闭 wifi 并关闭数据并再次打开，它会在某些情况下修复
完全关闭模拟器并重新启动它。

升级反应本机版本后图像不渲染

Image not rendering after upgrading react native version

android

react-native

react-native-android

更新 1

更新 2