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 you have read our privacy policy.

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