React Native Android - 静态资源不显示

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 /这是我的图像所在的位置.我提出了@ 2x和@ 3x [在这个答案中] [2]

我尝试使用.jpg而不是.png图像,并尝试用{uri:'assets/image/bg_splash.jpg'}(有和没有ext)替换require('image!bg_splash').

Answer 1

你是如何在你的Android应用程序中添加"bg-splash"的？如果每个DPI有不同的版本,它应该在android/app/src/main/res/drawable(或者等等).还要考虑到android只接受包含小写字母和下划线的资源名称,因此您的图像名称与该要求不匹配,因为它包含破折号.drawable-hdpi-xhdp