1

В разработке приложения используеться этот модуль https://docs.expo.io/versions/latest/sdk/screen-orientation/

Приложение здесь
https://snack.expo.io/@lenadgit/screen-orientation-module

Задача приложения: при вертикальной ориентации (Portrait) - через 5 сек загружаеться картинка, а при повороте смартфона (Landscape) - картинка исчезает. Не работает именно скрипт для изменения ориентации. Сам код вызова картинки с использованием таймера - работает (этот код закомментирован в constructor). В чем может быть проблема?
Модуль в файл импортирован import { ScreenOrientation } from 'expo' Или ошибка где-то в логке скрипта с использованием его в функции модуля?

2
  • У меня если честно ваш пример впринципе не работает, eslint выдает странную ошибку на ровном месте
    – STY
    11 дек 2019 в 19:41
  • какую именно ошибку выдает? можете скопировать? или скриншот сделать
    – Lena
    12 дек 2019 в 18:26

1 ответ 1

0

Были ошибки в логике работы с ScreenOrientation. Поправил ваш код, рабочий пример здесь. Добавил консоль логи чтобы было понятней.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { src: null, orientation: null};
  }

  async _getCurrentOrientationAsync() {
    return await ScreenOrientation.getOrientationAsync();
  }

  async componentWillMount() {
    const initOrientation = await this._getCurrentOrientationAsync();
    console.log('init orientation: ', initOrientation);

    this._orientationDidChange({orientationInfo: initOrientation});
    ScreenOrientation.addOrientationChangeListener(this._orientationDidChange.bind(this));
  }

  componentWillUnmount() {
    ScreenOrientation.removeOrientationChangeListeners(
      this._orientationDidChange
    );
  }

  _orientationDidChange(orientationObj) {
    const { orientation } = orientationObj.orientationInfo;
    console.log('orientation changed: ', orientation);

    this.setState({orientation});

    if (orientation.indexOf('PORTRAIT') >= 0) {
      console.log('show picture');
      this._showPicture.call(this);
    } else {
      console.log('hide picture');
      this._hidePicture.call(this);
    }
  }

  _showPicture() {
    const arr = ["http://i.piccy.info/i9/5ef231e9c88f67f8b1c2e11935d4016d/1574347072/28199/1342235/7.jpg", "http://i.piccy.info/i9/f23ea3aca85bba7ee824122ed30f9471/1574347130/45021/1342235/3.jpg"];


    const timer = setTimeout(() => {
      const bg = arr[Math.floor(Math.random() * arr.length)];
      this.setState({ src: bg });
    }, 5000);
  }

  _hidePicture() {
    this.setState({ src: null });
  }

  render() {
    const {orientation, src} = this.state
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{orientation}</Text>
        <Image
          style={{ width: 200, height: 200 }}
          source={{ uri: src }}
        />
      </View>
    );
  }
}
4
  • Подскажите пожалуйста - если заменить урлы к картинкам в массиве на файлы: ` const arr = ["pic-1.jpg", "pic-2.jpg"];` Тогда эти файлы картинками не отображаються. Почему так? Картинки передаються там как объкты, и свойство uri должно бы срабатывать. Также, если прописать вместо uri - require - это прямой путь к картинке : ` source={require('@expo/snack-static/react-native-logo.png')} ` (у меня будет source={require(src)} - так тоже не работает.
    – Lena
    11 янв 2020 в 14:42
  • @Lena вам сначала необходимо загрузить файлы изображений из файловой системы с помощью Asset.fromModule(image).downloadAsync() , попробуйте пример отсюда docs.expo.io/versions/latest/guides/…
    – STY
    16 янв 2020 в 19:50
  • Попробовала но чего-то ему не хватает, посмотрите пожалуйста как будет свободное время snack.expo.io/@lenadgit/supportive-raisins Пробовала менять путь к картинкам (через ./, также картинки помещала в папку assets, оттуда тоже не видит картинки. Отображение картинок в View осталось через uri, так как картинки это объект в этом приложении
    – Lena
    18 янв 2020 в 11:36
  • @Lena гляну, но чуть позже - пока совсем плохо со свободным временем
    – STY
    27 янв 2020 в 15:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.