React Native - iOS - 本地图像不可见（适用于 android）答案

【问题标题】：React Native - iOS - Local image invisible (works on android)React Native - iOS - 本地图像不可见（适用于 android）
【发布时间】：2019-01-31 05:13:08
【问题描述】：

我将 TouchableOpacity 与嵌套在其中的 Image 进行映射。它在 Android 上运行良好，但在 iOS 上图像是不可见的。我仍然可以点击一个 75x75 的可触摸不透明度，但图像在弹出的模态中是不可见的，一般来说。

这是如何工作的？我正在使用 Expo SDK FileSystem 来获取每个图像的路径。

例如：file://path/to/container/progress/myfilehash.jpg

我将它推送到我的状态并将其映射到组件中。 require() 函数不适用于我这样做的方式。我认为这纯粹是渲染的问题。

地图代码：

{this.state.images.map((val, key) => (
  <TouchableOpacity
    key={key}
    onPress={() => this.setState({active: val, modal: true})}
  >
    <Image
      style={{width: 75, height: 75}}
      source={{isStatic: true, uri: val}}
    />
  </TouchableOpacity>
))}

模态：

<Container style={Colors.Backdrop}>
  <Header style={Colors.Navbar}>
    <Left>
      <TouchableHighlight
        onPress={() => {
          this.setState({modal: false})
      }}>
        <Icon
          name="arrow-back"
          style={{color: 'white'}}
        />
      </TouchableHighlight>
    </Left>
    <Body></Body>
    <Right>
      <TouchableOpacity
        onPress={() => {
        this._deleteImage(this.state.active);
      }}>
        <Text
          style={[
            Colors.ErrorText, {
              fontSize: 24,
              marginRight: 10
            }
        ]}>&times;</Text>
      </TouchableOpacity>
    </Right>
  </Header>
  <Content>
    <View
      style={{flex: 1}}
    >
      <FitImage
        source={{uri: this.state.active}}
      />
    </View>
  </Content>
</Container>

获取图片路径的代码。（注意：我尝试不从 ios 截断“file://”，结果完全相同）

_getAllImagesInDirectory = async() => {
    let dir = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory + 'progress');

    dir.forEach((val) => {
      this.state.images.push(Platform.OS === 'ios' ? FileSystem.documentDirectory.substring(7, FileSystem.documentDirectory.length) : FileSystem.documentDirectory + 'progress/' + val);
    });

    await this.setState({images: this.state.images, loading: false});
}

【问题讨论】：

@Luminosity，你设置图片的大小了吗？
是的，在示例和说明中，您可以看到我将其设置为 75 像素 x 75 像素。
@Luminosity，抱歉错过了。我只记得这是我以前遇到的问题。如果您将按钮的背景颜色更改为红色或其他内容，是否会占用您希望图片所在的空间？
你用其他图片试过了吗？通常有些图片由于大小的原因无法在某些设备中加载。用其他图像尝试相同的操作，以检查图像是否不是问题
没有来自展会容器工作期间的图像。

标签： javascript ios reactjs react-native expo

【解决方案1】：

我曾经也遇到过这个问题，我通过将图像粘贴到根文件夹中来解决它，然后在 Image 标签的源中使用该路径。

【讨论】：

先生，我不确定您是否理解这个问题的上下文。