Мы будем использовать 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>
Как только пользователь коснется за пределами диалогового окна, оно исчезнет.
Это последний шаг. Были сделаны!