更新1

Question

我在本机 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>
    )
  };

这是我的render方法，它调用了上面的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

我用于刷卡的软件包称为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

看来您的模拟器未连接到Internet：

要再次检查模拟器是否已连接到互联网，请打开浏览器并尝试访问Google。

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

在模拟器上转到设置->关闭wifi并关闭数据，然后再次打开，在某些情况下可以解决
完全关闭模拟器，然后重新启动。

升级后无法渲染图像本机版本

更新1

更新2

2 个答案: