react native 中引用 自定义Image组件

1. 创建自定义组件Image的Class类

• import React,{ Component} from 'react';
  import{
      View,
      Image,
      StyleSheet
  } from 'react-native'
  
  
  export default class LKImage extends Component{
      constructor(){
          super();
      }
  
      render(){
          return(
              <View>
              {/* 加载本地图片*/}
              <Image 
                  source={require('./../accets/images/mine.png')}
                  style={{width:200,height:200}}
              />
              {/* 加载网络图片*/}
              <Image 
                  source={{uri:'https://hrbrzyk.com/img/banner1.jpg'}}
                  style={{width:200,height:200}}
                  />
              </View>
          )
      }
  }

  注意：在通过uri 加载网络图片时候，必须要设置宽度和高度，否则显示不出来图片。通过 require('')加载本地图片时候可以不用设置宽度和高度。

　　2. 在App.js中引用 自定一组件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import LKText from './components/LKText';
import LKImage from './components/LKImage';


const App: () => React$Node = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.mainViewStyle}>

      <LKImage/>
      </SafeAreaView>
    </>
  );
};


const styles=StyleSheet.create({
  mainViewStyle:{
      flex:1,
      backgroundColor:'red',
  }
});



export default App;

结果如图：