如何使用 React-Native-FS 渲染图像

Question

在我的 Android react-native 应用程序中，我将 jpg 文件从缓存文件夹移动到 RNFS.DocumentDirectoryPath，我在其中创建了一个 "image" 文件夹。我无法渲染这些图像：

在反应中 class:

state = {source:null}

async componentDidMount() {    

  async loadFile ( path ){
    await this.setState({source:{uri:path}})
  }

  const path = RNFS.DocumentDirectoryPath+'/images/d88b102c-d4c6-4dc1-9a4c-f2a0e599ddbf.jpg'


  await RNFS.exists(path).then( exists => {
        if(exists){
          this.loadFile(path);
      }
 }

   renderItem = ({ item }) => (
      <View key={item.Id} >
        <View>
          <TouchableOpacity onPress={() => this.onPressItem(item)}>
          <Text>{item.cardName}</Text>  
          <Image 
          source={this.state.source}
          style={{ width:'auto', height: 55 }}
          />
          </TouchableOpacity>
        </View>
      </View>
    );

图像存在，如果我将它转换为 base64，它会正确呈现。

Answer 1

我错过了 "file://"

const path = "file://"+RNFS.DocumentDirectoryPath+'/images/d88b102c-d4c6-4dc1-9a4c-f2a0e599ddbf.jpg'

Answer 2

我遇到了同样的问题。您还可以为本地图像使用可重用的图像组件。如果你只想显示来自本地 FS 的图像，请复制 render()-Method.

// ... Any part of your application: <FSImageView {...new FSImage("imageToDisplay.png")} /> 

// UI-Model
export class FSImage  {    

    // just an example: size, filepath... whatever you need
    private imageName: string 

    constructor(imageName: string){
        this.imageName = imageName
    }
}

export class FSImageView extends React.Component<FSImage, null> {
    
    render(){
        
        const RNFS = require('react-native-fs') // https://github.com/itinance/react-native-fs#readme (npm install react-native-fs)
        const platformFilePath = Platform.OS === 'android' ? RNFS.DocumentDirectoryPath : RNFS.MainBundlePath;
        const filePath = "file://" + platformFilePath + "/" + this.props.imageName

        return(
             <Image style={fsImageViewStyles.imageSize} source={{uri:filePath}} />  // setting the size is necessary otherwise it won't be displayed
        )
    }
}

const fsImageViewStyles = StyleSheet.create({
    imageSize : {
        width: 90,
        height: 90
    }
})

Answer 3

我可以在 Android 和 iOS 上使用 file:// 渲染，参考 https://github.com/DylanVann/react-native-fast-image/issues/410#issuecomment-1080104270

如何使用 React-Native-FS 渲染图像

How to render images with React-Native-FS

react-native

react-native-fs