javascript - 无法在 React Native 中显示图像

Question

我正在使用 react-native 0.28.0

我正在尝试根据本教程在 iPhone 模拟器上显示图像:Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

然后在 render() 函数中，我添加:

<Image style={styles.image} source={{uri:imageURI}} />

为图片分配的空间在那里，但没有显示图片。

Answer 1

希望以下解决方案能帮到你——都可以用于Image

<强>1。 HTTPS-解决方案:

1. Your picture is provided by an URI - source={{uri:imageURI}}
2. Example: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
3. Important: Dont forget to set the clip twice: {{}}

<强>2。 HTTP 解决方案:

1. If you want http look the following solution - HTTP Github issue

<强>3。本 map 片

1. Save: Create a new folder for your images and save them locally there (folder: images)
2. Require: Require the picture you saved locally by using the among syntax

var yourPicture = require ('./images/picture.jpg');

• 同一文件夹的符号 ('./')
• 上述文件夹的符号 ('../')
• 上面更多文件夹的符号 ('../../../')

3. Use: Use your image in the render function

render() {
  return (
    <Image source={yourPicture}/>
  )
}

您的图片风格与您描述的一样