React Native -如何传递数组属性并接收不同的uri

基础概念

React Native 是一个用于构建原生移动应用的 JavaScript 框架。它允许开发者使用 React 的编程模式来开发 iOS 和 Android 应用。在 React Native 中，组件之间的数据传递通常通过属性（props）来实现。

传递数组属性

在 React Native 中，传递数组属性与传递其他类型的属性类似。你可以在父组件中将数组作为属性传递给子组件。

示例代码

父组件

import React from 'react';
import { View } from 'react-native';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const uris = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  return (
    <View>
      <ChildComponent uris={uris} />
    </View>
  );
};

export default ParentComponent;

子组件

import React from 'react';
import { View, Image } from 'react-native';

const ChildComponent = ({ uris }) => {
  return (
    <View>
      {uris.map((uri, index) => (
        <Image key={index} source={{ uri }} style={{ width: 100, height: 100 }} />
      ))}
    </View>
  );
};

export default ChildComponent;

接收不同的 URI

在子组件中，你可以通过解构赋值从属性中接收数组，然后遍历数组来处理每个 URI。

应用场景

这种传递数组属性的方式在需要展示多个图片、视频或其他资源时非常有用。例如，在一个图片浏览器应用中，你可以将图片的 URI 数组传递给一个组件，然后在该组件中渲染这些图片。

可能遇到的问题及解决方法

问题：数组为空或未定义

原因：父组件传递的数组为空或未定义。

解决方法：在子组件中添加条件渲染，确保数组存在且不为空。

const ChildComponent = ({ uris }) => {
  if (!uris || uris.length === 0) {
    return <Text>No images to display</Text>;
  }

  return (
    <View>
      {uris.map((uri, index) => (
        <Image key={index} source={{ uri }} style={{ width: 100, height: 100 }} />
      ))}
    </View>
  );
};

问题：URI 格式不正确

原因：传递的 URI 格式不正确，导致图片无法加载。

解决方法：在子组件中添加错误处理逻辑，例如使用 onError 事件处理程序。

const ChildComponent = ({ uris }) => {
  return (
    <View>
      {uris.map((uri, index) => (
        <Image
          key={index}
          source={{ uri }}
          style={{ width: 100, height: 100 }}
          onError={(e) => console.error(`Failed to load image: ${uri}`, e)}
        />
      ))}
    </View>
  );
};