Question

我只是想将图像加载为静态资源。这是一个给我一个空白的白色屏幕的例子。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} = React;

var impowerz = React.createClass({
  displayName : "Login",
  render: function() {
    return (
     <View style={styles.container}>
      <Image source={require('image!bg-splash')} style={styles.bg} />
     </View>
    );
  }
});

var styles = StyleSheet.create({
  bg : {
    height: 667,
    width: 375
  },
  container: {
    flex: 1,
  },
});

AppRegistry.registerComponent('impowerz', () => impowerz);

我在Chrome调试器中检查了这是我得到的

[！[Chrome调试器查看我的静态资源] [1]] [1]

编辑我将图片标记包装在视图中，并为容器添加了flex：1样式

更新我尝试在react.log（）react-native / packager / packager.js中的assetsRoot属性，然后它返回/ impowerz / assets /这是我的图像所在的位置。我按照[在这个答案中] [2]

的建议制作了@ 2x和@ 3x

我尝试使用.jpg代替.png图片并尝试用{uri：'assets / image / bg_splash.jpg'}替换require（'image！bg_splash'）（使用和不使用ext）。

Answer 1

你是如何添加＆＃34; bg-splash＆＃34;到你的Android应用程序？如果每个DPI有不同的版本，它应该在android/app/src/main/res/drawable（或drawable-hdpi，-xhdp等之下。还要考虑到android只接受包含小写字母和下划线的资源名称，因此您的图像名称不符合该要求，因为它包含破折号。

Answer 2

in react-native v.0.14 +

 // same syntax for IOS and Android
 require('./my-icon.png')

完整图片文档here

自0.14发布以来，React Native提供了一种统一的方式来管理iOS和Android应用中的图像。要将静态图像添加到您的应用程序，请将其放在源代码树中的某个位置，并像这样引用它：

 <Image source={require('./my-icon.png')} />

//relative path
.
├── button.js
└── img
   ├── check@2x.png
   └── check@3x.png

Answer 3

我无法显示我的图像。
当我转到<div ng-repeat="(field, value) in box.fields"> <div class="my-toggle" my-toggle="value" ng-bind="value['par2']"></div> </div>时，只有myapp.directive('myToggle', [function(){ return{ restrict: 'A', scope: { myToggle : '=' }, link : function(scope, element, attr){ var startX = 0, x = 0; var elementLeft = 0; element.on('mousedown', function(event){ scope.$apply(function(){ scope.myToggle['par1'] = scope.myToggle['par1'] + 1; scope.myToggle['par2'] = scope.myToggle['par2'] + 1; console.log(scope.myToggle['par2']); }); }); }, }; }]);个文件夹。我首先将图像放在那些文件夹中。没工作。我的阅读理解能力显然需要升级，因为在instructions中，它显然是“可绘制的”。然后，我错误地认为这些“mipmap”文件夹需要更改为“drawable”文件夹（代替“mipmap”）。因此，如果有人这样做，请回溯，然后将添加中的<yourapp>/android/app/src/main/res个文件夹添加到“mipmap”文件夹中。然后确保重新编译应用程序。

Answer 4

要使图像显示在屏幕上，请将图像放在视图中：

return (
    <View
        style={styles.container}>
            <Image source={require('image!bg-splash')} style={styles.bg} />
    </View>
);

并将这些样式添加到视图

var styles = StyleSheet.create({
    container: {
        flex: 1,
    },

React Native Android - 静态资源不显示

4 个答案: