Мы будем использовать Expo, чтобы получить базовую структуру приложения и файлов. Сначала установите интерфейс командной строки Expo с помощью команды NPM:

npm install -g expo-cli

Затем запустите следующую строку, чтобы настроить приложение:

expo init

Expo предоставит вам возможность создать простой шаблон с панелью навигации или начать с пустого приложения.

Наконец, запустите команду start, чтобы запустить наше новое приложение:

expo start

Во время работы Expo вы можете загрузить приложение Expo на свой телефон и отсканировать QR-код на экране. Это откроет ваше недавно созданное приложение на вашем устройстве. Одно из преимуществ использования приложения Expo на вашем устройстве заключается в том, что оно автоматически обновляется по мере внесения вами изменений, что ускоряет процесс разработки.

Expo также имеет возможность запускать ваше приложение в эмуляторе iOS или Android на вашем компьютере. Как только ваше приложение будет завершено, вы также можете создать готовый файл для развертывания в магазине Google Play или Apple App Store.

Далее я покажу вам, как создать асинхронное действие, которое отображает графику «прядильщика» во время загрузки наших данных.

В нашем файле store.js я создал две строки действий и два простых средства создания действий для запуска и остановки нашего счетчика. Мы скоро увидим, как они используются. Они должны быть знакомы всем, кто использовал Redux. Создатели действий возвращают простой объект JavaScript, который мы отправляем нашему редуктору.

const START_SPINNER = 'START_SPINNER';
const STOP_SPINNER = 'STOP_SPINNER';
const startSpinner = () => {
  return {
    type: START_SPINNER
  };
};
const stopSpinner = () => {
  return {
    type: STOP_SPINNER
  };
};

Ниже наших действий мы можем создать асинхронный преобразователь. Здесь вы можете использовать любое асинхронное действие. Это конкретное приложение запрашивает API Карт Google, чтобы проверить статус пригородного поезда, курсирующего между Нью-Джерси и Нью-Йорком.

export const checkIfPathDown = (start, destination) => {
  return async dispatch => {
    dispatch(startSpinner());
[INSERT YOUR ANSYC ACTION HERE.... ]
    dispatch(stopSpinner());

Мы отправим действия запуска и остановки счетчика нашему редуктору. Соответствующие разделы показаны ниже.

const reducer = (state = initialState, action) => {
  switch (action.type) {
case START_SPINNER:
      return Object.assign({}, { ...state }, { runSpinner: true });
case STOP_SPINNER:
      return Object.assign({}, { ...state }, { runSpinner: false });
[OTHER ACTIONS ... ]
  
  }
}

Как видите, в нашем состоянии мы меняем переменную runSpinner на true или false.

В методе рендеринга нашего компонента мы можем использовать библиотеку «response-native-loading-spinner-overlay», чтобы показать счетчик во время загрузки наших данных. Я настроил цвет и стиль, чтобы они соответствовали остальному приложению.

<Spinner
  animation="slide"
  visible={this.props.runSpinner}
  size="large"
  overlayColor="rgb(114, 120, 130)"
  textContent={'Loading...'}
  textStyle={styles.spinnerTextStyle}
  color="#2196f3"
/>

Счетчик появится, когда для параметра «runSpinner» установлено значение true, а затем исчезнет, ​​если для него установлено значение false. Это дает пользователю приятную анимацию для просмотра во время ожидания.

После того, как наш счетчик удален, мы можем использовать наши данные в нашем приложении!

В этом приложении я буду использовать данные, полученные из API Карт Google, для отображения всплывающего сообщения для пользователя.

Вернувшись в наш метод рендеринга, мы отобразим один из двух разных вариантов в зависимости от нашего ответа от Google. Чтобы отображать данные пользователю, мы используем библиотеку «react-native-popup-dialog».

Подобно тому, как отображается счетчик, мы можем отобразить один из двух вариантов всплывающего окна, установив свойство «visible» наших компонентов Dialog. Эта переменная также находится в нашем хранилище redux.

<Dialog
  overlayOpacity={0}
  visible={this.props.pathDownDialog}
  onTouchOutside={this.props.stopDialogs}
  dialogAnimation={
    new ScaleAnimation({
      toValue: 0,
      useNativeDriver: true
      })
    }
 >
   <DialogContent style={styles.dialogBox}>
     <Text style={styles.dialogText}>THE PATH IS DOWN!</Text>
   </DialogContent>
</Dialog>
<Dialog
  overlayOpacity={0}
  visible={this.props.pathOkDialog}
  onTouchOutside={this.props.stopDialogs}
  dialogAnimation={
    new ScaleAnimation({
    toValue: 0,
    useNativeDriver: true
    })
  }
>
  <DialogContent style={styles.dialogBox}>
  <Text style={styles.dialogText}>THE PATH IS OK!</Text>
  </DialogContent>
</Dialog>

Как только пользователь коснется за пределами диалогового окна, оно исчезнет.

Это последний шаг. Были сделаны!