React Native：Base64 图像数组字符串未在 FlatList 中呈现

Question

我需要在我的 RN 应用程序中渲染一个带有图像项的 FlatList，但看起来我漏掉了一些东西。我正在获取 blob 数据并使用 Buffer 将其从我的 API 解析为字符串并将其推送到我的数组。我用那个数组来渲染那个 FlatList

export function HomeScreen() {
  const imagesList: any = [];

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () =>{
    await callAPI().then(res => {
      //blob base64 is from type jpeg
      imagesList.push({imageURI: "data:image/jpeg;base64,"+Buffer.from(res.image1).toString('ascii')})
    })
  }

  return (
    <View style={[styles.imageSlider, {width, height}]}>
      <FlatList
        data={imagesList}
        renderItem={({item, index}) => (
          <>
            {console.log('item: ', item)}
            <Image
              key={index}
              source={{uri: item.imageURI}}
              style={{
                height,
                width,
                resizeMode: 'cover',
                maxHeight: 500,
                maxWidth: 500,
              }}
            />
          </>
        )}
      />
    </View>
  )
}

我检查了从 api 收到的数据，一切正常，但没有呈现

谁能告诉我我的问题？我不是RN专家 谢谢！

Answer 1

我能看到两个问题...

您没有使用任何状态
您在需要 Base64 的地方将缓冲区编码为 ASCII

// Define state using the useState hook
const [ imagesList, setImagesList ] = useState<Array<{ imageURI: string }>>([]);

const loadData = async () => {
  const { image1 } = await callAPI()
  // you want an array for some reason ¯\_(ツ)_/¯
  return [{
    imageURI: `data:image/jpeg;base64,${Buffer.from(image1).toString("base64")}`
  }]
}

useEffect(() => {
  loadData.then(setImagesList)
}, [])

React Native：Base64 图像数组字符串未在 FlatList 中呈现

React Native: Base64 Image Array String not rendering in FlatList

javascript

typescript

react-native

tsx

axios