React native学习第九章：图片

最新推荐文章于 2024-07-31 23:34:46 发布

小波波1992

最新推荐文章于 2024-07-31 23:34:46 发布

阅读量292

点赞数 1

分类专栏： React Native

本文链接：https://blog.csdn.net/aa654403231/article/details/62045373

版权

React Native 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


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 => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );

    return (

      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>
          {contents}
        </Text>


          <Image source={require('./img/icon_manage.png')}/>
          <Image source={{uri:'mainView_imv_ruoyou'}} style={{width:300,height:200}}/>
          <Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={{width:200,height:200}}/>
          <Image source={require('./img/icon_manage.png')}>
            <Text>inside</Text>
          </Image>
      </View>
    );
  }
}

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);

<Image source={require('./img/icon_manage.png')}/>访问根路径下的图片，大小就是图片大小

<Image source={{uri:'mainView_imv_ruoyou'}} style={{width:300,height:200}}/>访问项目Assets下的图片，大小必须申明

<Image source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} style={{width:200,height:200}}/>访问网络图片，大小需声明

<Image source={require('./img/icon_manage.png')}>
<Text>inside</Text>
</Image> 背景图

遇到的问题：图片显示不出来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一下，再运行就好了