我刚开始使用React native,对React创建web应用程序有相当不错的理解...我在这里遇到了一个令人困惑的问题,在使用react for the web时从未出现过.

基本上,我渲染的是一个组件,其图像是通过映射其父组件中的一组对象而动态生成的.

export default class ImageComponent extends React.Component {
  render() {
    return (
        <Image source={this.props.source}/>
    );
  }
};

及其父组件:

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
   this.state = {
      images:[
        { src: './src/images/1.png'},
        { src: '/src/images/2.png'},
        { src: './src/images/3.png'}
      ]
    }
   }

  render() {
    let images = this.state.images.map((image) => {
      return(<ImageComponent source={image.src}  />);
    })

    return (
      <View>
        {images}
      </View>
    );
  }
};

In device simulator I am getting the following error:

"警告:失败的propType:为'Image'提供的prop'source'无效请判断'BasicComponent'的呈现方法"

有人知道这里会发生什么吗?

推荐答案

您应该需要本地资源,或者使用具有uri键的对象.

所以要么在MainComponent:

this.state = {
  images:[
    require('./src/images/1.png'),
    require('./src/images/2.png'),
    require('./src/images/3.png')
  ]
}

或者BasicComponent年后:

return (
  <Image 
    source={{uri: this.props.source}}
  />
);

Reactjs相关问答推荐

Inbox Enum类型以React组件状态时出现TypScript错误

使用setInterval判断数据的时间,然后在过期后从对象中删除;遇到性能问题

react 表复选框不对任何操作做出react

如何创建react router v6的自定义子路由?

UseEffect和useSelector的奇怪问题导致无限循环

React,React Router,Joy UI:如何在导航离开和返回后禁用snackbar重新出现?

获取未捕获的错误:Gatsby生产版本上的最小化react 错误#418

可以使用mode.css/mode.scss引用常规的类名吗?

使用Ionic 7和React 18,如何访问历史对象以在页面之间导航?

如何通过reactjs正确显示记录

悬停轴时重新绘制自定义参照线

如何在中间件中获取 nextAuth 会话

设置自定义形状的纹理

如何防止开发人员使用 ESLint 在 React 项目中使用特定的钩子?

位于组件material-ui中的TextField中的 map 功能不起作用

如何在 React 中使用 debounce hooks

需要在窗口调整大小时更新 React 组件

不能在我的代码中使用 .给我一个警告!有人知道解决方案吗?

如何在 JSX 中使用 -webkit- 前缀?

为什么我在运行一些 npm react 命令时会收到这些警告?