RN 加载图片

本地图片

<Image source={require('./img/0.png')} />

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

export default class Banner extends Component {
  render() {
 
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Image
          source={
            require('./img/0.png'）
          }
          style={{width: 362, height: 135, resizeMode: 'cover'}}
        />
      </View>
    );
  }
}

网络图片

export default class Banner extends Component {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Image
          source={{
            uri:
              'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
          }}
          style={{width: 362, height: 135, resizeMode: 'cover'}}
        />
      </View>
    );
  }
}

Android上运行效果图：

image.png

或者参数传递的方式

export default class Banner extends Component {
  render() {
    let pic = {
      uri:
        'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg',
    };

    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Image
          source={
            pic
          }
          style={{width: 362, height: 135, resizeMode: 'cover'}}
        />
      </View>
    );
  }
}

注意source = {pic} 是单引号