首页 > 解决方案 > 无法在 android 模拟器中显示 react-native 应用程序的图像

问题描述

我正在为 android 构建一个 react-native 应用程序。我正在尝试在我的应用程序中包含图像。无论我做什么,我都无法让图像显示在我的应用程序中。我已阅读其他答案并尝试使用 https 图像并为我的图像添加了高度和宽度。这是组件的渲染方法,其中包含我试图显示的图像。现在源动态指向我的 s3 存储桶。

render() {
    const { textWrapperStyle, svgStyle, containerStyle, textStyle } = styles
    console.log("FILE URL", this.props.file.url)
    return (
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <Modal
          animationType={'slide'}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert('Modal has been closed.');
          }}>
          <View style={{flex: 1, justifyContent: 'center'}}>
            <View>
                <Image
                  style={{width: 200, height: 200}}
                  source={{uri: "https://obeya-dgeismar-site-assets"+this.props.file.url }}
                />

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
              </View>
          </View>
        </Modal>
        <TouchableOpacity style={[containerStyle, this.props.customStyle]} onPress={() => {this.setModalVisible(true);}}>
          <View style={textWrapperStyle}>
            <Text>
              {this.props.file.title}
            </Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={()=>this.confirmDelete(this.props.file.id, this.props.eventId)}>
          <Close style={styles.svgStyle} fill='red'/>
        </TouchableOpacity>
      </View>
    )
  }

这是整个项目的链接。我目前在 NExus 5x API 29 x86 上的 android studio 中运行它

标签: androidimagereact-native

解决方案


推荐阅读