反应原生图像组件在android中不起作用

Posted 2023-02-26

【中文标题】反应原生图像组件在android中不起作用

【英文标题】：React native Image component not working in android

【发布时间】：2016-07-06 13:15:21

【问题描述】：

我是 React Native 的新手，我在使用 Image 时遇到问题。

为了简化我的问题，我创建了一个新的 react native 项目，并在 index.android.js 中添加了 Image 组件，如下所示：

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

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

class TestProject extends Component 
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome>
          Welcome to React Native!
        </Text>
        <Image source=uri: 'http://facebook.github.io/react/img/logo_og.png'/>
        <Text style=styles.instructions>
          To get started, edit index.android.js
        </Text>
        <Text style=styles.instructions>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

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

Image 组件中的 url 是从 React Native Image documentation 复制而来的。 我究竟做错了什么？谁能帮帮我？

我的 react native 是 0.29.0 ，我还没有在 ios 中尝试过，因为现在我需要先创建一个 Android 应用。

【问题讨论】：

您需要提供要渲染的图像的宽度和高度...as style = height:30, width:30

感谢您的回答。那可能是因为我还没有尝试过。我会尝试设置图像的大小，看看它是否有效。

【参考方案1】：

给出图像的高度和宽度。

<Image source=uri: 'http://facebook.github.io/react/img/logo_og.png' style= height: 50, width: 50 />

【参考方案2】：

尝试为您的图片添加宽度和高度样式。

对于 react native 来下载图片，获取它的大小然后再次渲染会导致糟糕的用户体验。您需要指定尺寸。