Блог

Главная - Вопросы по программированию - Реагирующий собственный пример из facebook.github.io/react-native / похоже, это не работает

Реагирующий собственный пример из facebook.github.io/react-native / похоже, это не работает

#react-native

#react-native

Вопрос:

Я использовал 

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

Ответ №1:

Попробуйте это: 

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

Вам нужно будет каким-то образом оформить его, чтобы он отображался.

Комментарии:

1. Спасибо, текст был удален, но изображение по-прежнему не отображается.

2. Я протестировал это, и это сработало для меня. Вы запускаете это в симуляторе? Убедитесь, что устройство / симулятор имеет доступ в Интернет.

3. Да, в симуляторе, запущенном с помощью {react-native run-ios}, как я могу убедиться, что у симулятора есть доступ в Интернет?

4. В идеале он должен использовать сеть вашего компьютера. Вы можете перейти на главный экран (Cmnd Shift H) и протестировать приложение Safari, чтобы убедиться.

5. Не знаю, почему тогда. В любом случае попробуйте указать «uri» вместо «url»

Ответ №2:

Со мной это работает так:

Apple заставляет нас использовать https, и я попробовал это с другим изображением.

Кроме того, вам нужно будет использовать размеры изображения, как сказал @Saleel

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