React Native影视卡片图片设置功能异常求助

• 统一属性传递逻辑
  保证父组件给MovieCard传图片的方式和传名称完全一致：父组件里每个电影数据要带image字段，渲染卡片时通过image={movie.image}传递，子组件MovieCard通过props.image接收。

• 区分本地/网络图片的处理方式

  • 本地图片：必须用require()引入路径，不能直接传字符串。比如数据源里要写成image: require('../assets/你的图片名.jpg')，子组件里直接把props.image传给Image的source属性。
  • 网络图片：必须给Image组件设置明确的宽高样式，否则无法显示。示例代码：

    <Image
      source={{ uri: props.image }}
      style={{ width: 180, height: 240 }}
    />
    

• 动态修改图片的状态维护
  如果是用户手动设置图片（比如选图后更新），要确保父组件的state里，每个电影对象的image字段能被正确更新，更新后子组件能拿到最新值。

• 修正后的组件代码示例
  MovieCard.js可以这么写，兼容两种图片类型：

  import { View, Text, Image, StyleSheet } from 'react-native';
  
  export default function MovieCard(props) {
    return (
      <View style={styles.cardContainer}>
        <Image
          source={typeof props.image === 'string' ? { uri: props.image } : props.image}
          style={styles.cardImage}
        />
        <Text style={styles.cardName}>{props.name}</Text>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    cardContainer: {
      margin: 12,
      alignItems: 'center',
    },
    cardImage: {
      width: 180,
      height: 240,
      borderRadius: 8,
    },
    cardName: {
      marginTop: 8,
      fontSize: 16,
      fontWeight: '500',
    },
  });
  

  父组件Movies.js里的数据源和渲染逻辑：

  // 本地图片示例
  const [movies, setMovies] = useState([
    { id: 1, name: '星际穿越', image: require('../assets/interstellar.jpg') },
    { id: 2, name: '盗梦空间', image: require('../assets/inception.jpg') },
  ]);
  
  // 或者网络图片示例
  // const [movies, setMovies] = useState([
  //   { id: 1, name: '星际穿越', image: 'https://example.com/interstellar.jpg' },
  //   { id: 2, name: '盗梦空间', image: 'https://example.com/inception.jpg' },
  // ]);
  
  // 渲染卡片
  return (
    <View style={styles.moviesContainer}>
      {movies.map(movie => (
        <MovieCard key={movie.id} name={movie.name} image={movie.image} />
      ))}
    </View>
  );
  

内容的提问来源于stack exchange，提问作者JustCan