Question

我用过

react-native init AwkwardScrollingImageWithText

然后编辑index.ios.js。但是，当我运行应用程序时，没有图像。这让我疯狂，因为我复制/粘贴了他们的例子，这非常令人沮丧，我无法做样本工作，更不用说创建我自己的应用程序了。

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

export default class AwkwardScrollingImageWithText extends Component {
  render() {
    return (
      <ScrollView>
              <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
              <Text>
                On iOS, a React Native ScrollView uses a native UIScrollView.
                On Android, it uses a native ScrollView.

                On iOS, a React Native Image uses a native UIImageView.
                On Android, it uses a native ImageView.

                React Native wraps the fundamental native components, giving you
                the performance of a native app, plus the clean design of React.
              </Text>
            </ScrollView>
    );
  }
}

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('AwkwardScrollingImageWithText', () => AwkwardScrollingImageWithText);

Answer 1

试试这个：

<Image
  source={{ url: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/' }}
  style={{ width: 200, height: 200 }}
/>

您必须以某种方式设置它以使其显示。

Answer 2

它与我一起工作：

Apple强迫我们使用https，并尝试使用不同的图像。

另外，您需要使用图像尺寸@Saleel说

    <Image
      source={{ url: 'https://i.giphy.com/JltOMwYmi0VrO.gif' }}
      style={{
        width: 375,
        height: 402,
      }}
    />

来自facebook.github.io/react-native/的React Native示例似乎不起作用

2 个答案: