Question

我对原生开发做出反应是全新的，我正在尝试展示<Image>。我一直收到这个错误：

警告：道具类型失败：提供给Image`
的道具source无效

以下是我所拥有的：首先，列出了项目中定义的所有图像，如下所示：

export const IMAGES = {
   ScreenStart1: require('../../assets/img/app/startScreen/start1.jpg'),
}

这是调用图像组件的视图：

import {IMAGES} from '../../shared/listOfImages'


import FullScreenImage from '../../components/fullScreenImage'

export default class StartScreen extends React.Component {

  render (): React$Element<*> {
    let src = IMAGES.ScreenStart1;

    return (
      <View  style={{flex: 1}}>
        <FullScreenImage src="{src}"/>
      </View>
    );
  }
}

最后是FullScreenImage组件：

//this displays image in full screen
export default class FullScreenImage extends Component {

  render (): React$Element<*> {
    let src = this.props.src;
    return (
      <Image source={src} style={fullScreenImageStyle.container} resizeMode='cover'>
      </Image>

    );
  }
}

有人可以帮帮我吗？

Answer 1

我认为你的问题是<FullScreenImage src="{src}"/>，这实际上传递了一个字符串'{src}'，如果你想将一个变量注入一个字符串，你必须这样做：

<FullScreenImage src={`${src}`}/>

但是，有没有理由说你不只是做<FullScreenImage src={src}/>？

React Native - 传递给Image的无效prop源

1 个答案: