React native学习第九章：图片

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

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => {score.name}:{score.value}{"\n"}
    );

    return (

      
        
          2048 High Scores!
        
        
          {contents}
        


          
          
          
          
            inside
          
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

  访问根路径下的图片，大小就是图片大小

  访问项目Assets下的图片，大小必须申明

  访问网络图片，大小需声明

            inside
  背景图

遇到的问题：图片显示不出来warning ：Native component for “RCTImageView” does not exist

在podfile里面

 

target ‘PlayGame’ do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => ‘/Users/macmini/Desktop/PlayGame/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    'RCTImage',
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "Yoga", :path => “/Users/macmini/Desktop/PlayGame/node_modules/react-native/ReactCommon/yoga"

end

进入根目录，pod update一下，再运行就好了