Починаємо працювати з шаблонами React Native

() translation by (you can also view the original English article)

Розробка додатків React Native з нуля часто є громіздким процесом, особливо частиною дизайну, тому що вам потрібно планувати розробку як на пристрої Android, так і на iOS. Не тільки це, ви також повинні переконатися, що ваш додаток виглядає красиво на різних розмірах екрану.

Ось чому потрібні шаблони. Вони надають для вас початковий дизайн, так що ваш додаток виглядає красиво з мінімальними зусиллями з вашого боку. Є кілька таких шаблонів в CodeCanyon, в маркеті для шаблонів і плагінів. Там ви можете знайти різні типи шаблонів, орієнтованих на певний тип програми, яку ви хочете створити.

У цьому уроці ми розглянемо, як використовувати шаблон BeoStore. Як випливає з назви, BeoStore - це шаблон React Native додатки для електронної комерції.

Отримання шаблону з маркетплейса

Ви можете завантажити шаблон, перейшовши на сторінку продукту BeoStore в CodeCanyon. Це платний шаблон, але він коштує вкладень, тому що він має більшість функцій, необхідних в додатку для електронної комерції. Все, що вам потрібно зробити, це налаштувати шаблон і відредагувати його за своїм смаком. Щоб отримати уявлення про те, що він пропонує з коробки, ось деякі з його основних особливостей:

Повна інтеграція з WooCommerce: якщо ви використовуєте веб-сайт WooCommerce, додаток може відображати ті ж продукти, що і на вашому існуючому веб-сайті.
Підтримка як iOS, так і Android: додаток працює і відмінно виглядає на платформах Android та iOS.
Соціальні логіни: клієнти можуть увійти в систему, використовуючи свій обліковий запис Facebook або Google.
Легка настройка: все розбите на компоненти. Це гарантує, що ви можете легко налаштувати шаблон на основі вашого бренду.
Push-повідомлення: вони автоматично повідомляють ваших клієнтів, коли оновлюється статус їх замовлення. Ви також можете відправляти push-повідомлення для рекламних акцій. Push-повідомлення реалізовані за допомогою Firebase.
Багатомовна підтримка: з коробки ви отримуєте англійська як основна мова. В'єтнамський існує як другий варіант, але ви також можете додати свою власну мову.
Безпечна інтеграція платежів: платежі здійснюються за допомогою PayPal.

Якщо у вас ще немає облікового запису Envato, ви можете зареєструватися тут. Після цього увійдіть в свою новий обліковий запис. Потім ви можете повернутися на сторінку BeoStore і натиснути кнопку Buy Now.

Налаштування проекту

Після того як ви придбали шаблон, ви отримаєте посилання для завантаження файлу архіву шаблону. Вийміть його, і ви отримаєте папку CodeCanyon, що містить MStore 2.2.

MStore 2.2 - це каталог для проекту шаблону. Йдемо далі і відкриваємо нове вікно терміналу всередині цього каталогу і виконуємо наступну команду:

1	npm install

Це встановить всі залежності проекту. Це може зайняти деякий час, в залежності від швидкості завантаження, тому що має завантажиться безліч залежностей. Погляньте на package.json, якщо хочете дізнатися, які пакети, які необхідно завантажити.

Як тільки це буде зроблено, є додатковий крок, якщо ви хочете версію для iOS-пристроїв. Перейдіть в папку iOS і виконайте наступне:

1	pod install

Потім, для Android, підключіть мобільний пристрій до комп'ютера і виконайте:

1	adb devices

У цьому списку перераховані всі пристрої Android, підключені до вашого комп'ютера. Якщо це перший раз, коли ви підключаєте пристрій, ви повинні отримати запит з проханням дозволити комп'ютеру налагодження по USB. Просто натисніть yes, як тільки ви отримаєте це запрошення.

Тепер ви можете запустити додаток на своєму Android-пристрої:

1	react-native run-android

Для iOS:

1	react-native run-ios

Якщо ви не знайшли ніяких помилок, ви отримаєте вітання на наступній сторінці:

Щоб дати вам уявлення про різні сторінки, доступних в шаблоні, ось ще кілька скріншотів:

Пошук і усунення несправностей

У цьому розділі я склав список загальних помилок настройки проекту і їх рішень.

Чи не запускається сервер розробки

Якщо сервер розробки не запускався автоматично, коли ви запускали react-native run-android або react-native run-ios, ви можете вручну запустити його, виконавши:

1	react-native start

Довгий час завантаження спостерігача

Якщо ви отримаєте помилку, аналогічну наступною:

Error building DependencyGraph:
 Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
    at [object Object]._onTimeout (index.js:103:16)
    at Timer.listOnTimeout (timers.js:89:15)

Це пов'язано з тим, що працює існуючий екземпляр Watchman. Це компонент сервера розробки React Native. Ви можете вирішити цю помилку і закрити Watchman, виконавши наступні команди:

1	sudo sysctl fs.inotify.max_user_instances=99999
2	sudo sysctl fs.inotify.max_user_watches=99999
3	sudo sysctl fs.inotify.max_queued_events=99999
4	watchman shutdown-server

Не вдалося запустити ADB Reverse

Якщо ви отримуєте наступну помилку:

1	error: closed Could not run adb reverse:
2	Command failed: /path/to/android-sdk-linux/sdk/platform-tools/adb -s
3	300494a80ea22200 reverse tcp:8081 tcp:8081

Це означає, що ваше Android-пристрій працює з версією нижче 5.0 (Lollipop). Насправді це не помилка. Це просто означає, що ваше Android-пристрій не підтримує adb reverse, яке використовується для підключення сервера розробки до вашого пристрою через USB-налагодження. Якщо це не доступно, React Native повертається до налагодження за допомогою Wi-Fi. Ви можете знайти додаткову інформацію про це тут: Запуск на пристрої.

Щось ще може привести до збою вашої збірки. Ви можете прокручувати термінал, щоб побачити, чи є які-небудь помилки, які сталися до цього.

Неможливо знайти змінну `_fbBatchedBridge`

Якщо ви отримуєте наступну помилку і сервер розробки працює в режимі Wi-Fi, це означає, що ви не налаштували IP-адреса вашого комп'ютера на своєму Android пристрої. (Зазвичай це тільки пристроях Android версії нижче 5.0).

1	ReferenceError: Can't find variable: _fbBatchedBridge (line 1 in the generated bundle)

Ви можете виконати наступне, щоб побачити параметри розробника React Native на вашому пристрої:

1	adb shell input keyevent 82

Виберіть Dev Settings в меню. У розділі Debugging, натисніть на Debug server host & port for device. Введіть внутрішній IP-адреса, призначений домашнім маршрутизатором, а також порт, в якому працює сервер розробки, і натисніть OK:

1	YOUR_INTERNAL_IP:8081

Повернення до головного екрана додатка і знову введіть adb shell input keyevent 82. На цей раз виберіть Reload, щоб перезавантажити додаток.

Не вдалося знайти Firebase, додаток або GMS Play Services

Якщо ви отримуєте помилки «не вдалося знайти», це означає, що ви не встановили відповідний пакет за допомогою Android SDK Manager.

Ось пакети, які необхідно встановити:

Репозиторій підтримки Android
Бібліотека підтримки Android
Сервіси Google Play
Репозиторій Google

Обов'язково поновіть існуючі пакети, якщо є доступне оновлення.

Інші проблеми

Якщо ваша проблема не пов'язана ні з одним з перерахованих вище, ви можете спробувати наступне:

Ознайомтеся з документацією щодо усунення неполадок.
Ознайомтеся з коментарями до шаблону. Ви можете знайти помилку, яку ви отримуєте. Спробуйте узагальнити і вкоротити повідомлення про помилку, не намагайтеся знайти повне повідомлення про помилку. Якщо ви не можете знайти помилку, ви можете спробувати задати своє питання в коментарях. Служба підтримки зазвичай відповідає швидко.
Спробуйте знайти помилку в Google. Навіть якщо результати, які ви знайдете, не пов'язані з використанням шаблону, вони дадуть вам уявлення про те, як вирішити проблему.
Пошукайте на StackOverflow або задайте нове питання. Обов'язково вкажіть всі необхідні відомості (наприклад, повідомлення про помилку, зроблені кроки). Ось хороша стаття про те, як ставити питання на StackOverflow.

Налаштування шаблону

Хорошим місцем для початку вивчення того, як працювати з шаблоном, є його документація:

Макет проекту: показує, де шукати різні файли в шаблоні і для чого вони використовуються.
Міграція WooCommerce: показує, як ви можете підключити свій існуючий веб-сайт WooCommerce до додатка. Підключення додатки до WooCommerce означає, що він зможе отримувати всі категорії продуктів і продукти в вашому WooCommerce магазині.
Міграція сервісів: показує, як налаштувати назву програми, Firebase (для push-повідомлень) та соціальні логіни.
Персоналізація: показує, як налаштувати мову і теми.

Обов'язково ознайомтесь з ними! Я не буду повторювати те, що згадувалося в документації. Замість цього те, що ми збираємося робити в цьому розділі, - це фактично налаштувати шаблон, щоб він виглядав так, як ми хочемо.

Більшість налаштувань конфігурації проекту зберігаються в файлі app / Constants.js. Ось кілька прикладів, які ви можете змінити в цьому файлі:

Інтеграція WooCommerce: URL-адресу магазину WooCommerce, використовуваного додатком. За замовчуванням використовується mstore.io.

WordPress: {
    Address: 'http://mstore.io/api',
},
WooCommerce: {
    url: 'http://mstore.io',
    consumerKey: '',
    consumerSecret: '',
    wp_api: true,
    version: 'wc/v1',
    timeout: 10, //request timeout
    RootCategoryId: 0,
    Product: {
        Display: {
            ProductThumbnails: {width: 180, height: 216,},
            CatalogImages: {width: 300, height: 360,},
            SingleProductImage: {width: 600, height: 720,}
        }
    },
},

Соціальні логіни: це реалізовано з використанням Auth0, платформи аутентифікації. За замовчуванням шаблон підтримує тільки Google і Facebook. Але ви повинні мати можливість додавати будь-які службами, які підтримує Auth0.

1	Auth0: {
2	clientId: '',
3	domain: '',
4	},

Іконки: ви можете використовувати будь-яку іконку з Fontawesome, але ви повинні додати префікс ім'ям ios-.

Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons.
    Menu: 'ios-menu',
    Home: 'ios-home',
    Back: 'ios-arrow-back',
    Forward: 'ios-arrow-forward',
    Config: 'ios-settings',
    More: 'ios-more',
    SignIn: 'ios-log-in',
    SignOut: 'ios-log-out',
    ShoppingCart: 'ios-cart',
    ShoppingCartEmpty: 'ios-cart-outline',
    Sort: 'ios-funnel',
    Filter: 'ios-funnel-outline',
    ShowItem: 'ios-arrow-dropright',
    HideItem: 'ios-arrow-dropup',
    ListMode: 'ios-list-box',
    GridMode: 'ios-grid',
    RatingFull: 'ios-star',
    RatingEmpty: 'ios-star-outline',
    Wishlist: 'ios-heart',
    WishlistEmpty: 'ios-heart-outline',
    Delete: 'ios-trash',
    AddToCart: 'ios-cart',
    MyOrder: 'ios-cube',
    News: 'ios-paper',
    Mail: 'ios-mail',
    RatioOff: 'ios-radio-button-off',
    RatioOn: 'ios-radio-button-on',
    Search: 'ios-search',
    Close: 'ios-close',
    HappyFace:'ios-happy-outline',
    SadFace: 'ios-sad-outline',
},

Тема: Кольори для різних компонентів, що складають кожну сторінку, також можуть бути оновлені. Наприклад, якщо ви хочете змінити колір фону заголовка, ви можете оновити значення для TopBar:

1	Color: {
2	TopBar: 'white',
3	TopBarIcon: '#283747',
4	}

Зображення: Екран заставки та інші зображення також можна оновити, вказавши новий шлях до кожного з наступних елементів:

Image: {
    Logo: require('./images/logo.png'),
    SplashScreen: require('./images/splash_screen.png'),
    CategoryPlaceholder: require('./images/category_placehodler.png'),
    DefaultAvatar: require('./images/default_avatar.jpg'),
    AvatarBackground: require('./images/avatar_background.jpg'),
    CheckoutStep1: require('./images/line-1.png'),
    CheckoutStep2: require('./images/line-2.png'),
    CheckoutStep3: require('./images/line-3.png'),
    Stripe: require('./images/stripe.png'),
    PayPal: require('./images/PayPal.png'),
    CashOnDelivery: require('./images/cash_on_delivery.png'),
    PlaceHolder: require('./images/placeholderImage.png'),
},

Ці зображення зберігаються в каталозі app / images, їх можна просто замінити, якщо ви не хочете зберігати старі зображення.

Ви також можете змінити параметри PayPal з цього файлу. Обов'язково створіть власний обліковий запис розробника PayPal для отримання ідентифікатора clientID та secretKey. Не забудьте оновити sandBoxMode на false, коли ви розгортаєте свій додаток для продакшена, тому що за замовчуванням він використовує режим пісочниці, так що фактичні гроші не будуть витрачені на транзакції.

PayPal: {
    clientID: '',
    secretKey: '',
    sandBoxMode: true, //change to false on production
},

Щоб налаштувати окремі сторінки, вам потрібно перейти в каталог app/containers. Тут ви знайдете файли для кожної сторінки. Наприклад, якщо ви хочете налаштувати домашню сторінку, перейдіть в папку home і відкрийте файл index.js. Після відкриття ви побачите, що сторінка використовує компонент <ImageCard> для відображення кожної категорії продукту. Тому, якщо ви хочете додати загальний стиль для компонента <ImageCard>, вам необхідно оновити файл app/Components/ImageCard/index.js. В іншому випадку ви можете просто оновити стилі всередині самої сторінки:

this.styles = {
    container: {flex: 1},
    imageCard: {
        width: Constants.Dimension.ScreenWidth(1),
        height: 200,
    },
    mainCategoryText: {
        color: 'white', //change the color of the category text
        fontSize: 40 //make the category text bigger
    },
    numberOfProductsText: {
        color: 'white',
        fontSize: 15
    }
}

Висновок

Цей урок ні в якому разі не є вичерпним посібником з використання шаблону BeoStore. Але ми розглянули досить багато питань, особливо щодо усунення проблеми із встановленням, яких не вистачає офіційної документації.

Наступним кроком є підключення цього шаблону до вашого WooCommerce веб-сайту або навіть його перепрофілювання, щоб його можна було використовувати для інших типів додатків.

Завантажте шаблон зараз, або якщо ви хочете дізнатися більше про це, ви можете подивитися документацію тут. Ви також можете знайти ще багато шаблонів додатків React Native на CodeCanyon.