Работа с навигаторами

Результаты на этой неделе:

К сожалению, это была самая загруженная неделя для меня. Вдобавок ко всему я столкнулся с массой больших проблем. Так что статья на этой неделе может быть не так эффективна, как предыдущие. Живи и учись.

Большая часть этой недели была потрачена на то, чтобы вернуться к чертежной доске и учиться, а не делать.

Портирование сайта в приложение

Чтобы сделать следующий шаг с React Native, я подумал, что интересным вызовом будет создание приложения на основе веб-сайта, который я создал на прошлой неделе. Какое-то время мне было интересно узнать о практических возможностях (если таковые имеются) переноса веб-сайта, созданного на React, в приложение React Native.

Изучение представлений

Я начал с попытки отобразить образец данных из файла JSON в представлении. JSON состоит из набора рыб, которые я хочу представить в прокручиваемом списке. Это привело меня к изучению ScrollView и ListView.

fish2 : {
  name : 'Lobster',
  image : 'http://i.istockimg.com/file_thumbview_approve/32135274/5/stock-photo-32135274-cooked-lobster.jpg',
  
  desc : 'These tender, mouth-watering beauties are a fantastic hit  at any dinner party.',
  
  price : 3200,
  status : 'available'
},

Итак, сразу же, фундаментальное различие между React и React Native заключается в типе представлений, доступных для отображения вашего контента. Это требует некоторых знаний о разработке приложений, поскольку вам необходимо знать об определенных ограничениях и передовых методах.

Это имеет смысл, если подумать. Данные и логика могут остаться прежними, но поскольку вы адаптируете контент для новой платформы, вам необходимо ознакомиться с применимыми правилами и ограничениями. Вы не можете легко перенести веб-сайт React в приложение React Native точно так же, как вы не можете легко перенести контент, предназначенный для 27-экранного, мыши и клавиатуры, на 5-экранный, предназначенный для сенсорного ввода.

К счастью, у меня есть некоторый опыт создания приложений для Android, поэтому я довольно быстро понял это после прочтения документации. Однако, как только вы преодолеете эти проблемы, то есть если вы делали это какое-то время, я думаю, можно с уверенностью сказать, что вы можете получить доступ к данным таким же образом. Вы можете повторно использовать большую часть логики и данных. Узким местом будет структурирование и организация контента.

Давайте рассмотрим один пример, сравнив ScrollView с ListView.

ScrollView — это универсальный контейнер прокрутки, предназначенный для ограниченного количества элементов. Причина в том, что ScrollView будет отображать каждый элемент в своем представлении, даже если он в данный момент не отображается на экране. Это явно повлияет на производительность.

ListView, с другой стороны, намного умнее, так как отображает только те элементы, которые отображаются в данный момент. Иногда это может вызвать задержки, если пользователь прокручивает слишком быстро и не хватает времени для рендеринга элементов, поэтому я был очень рад обнаружить все приятные реквизиты, которые я мог установить, такие как initialListSize(number), который предварительно рендерит заданное количество элементов. Предметы.

Добавление ужасного навигатора

К настоящему времени я реализовал достаточно навигаторов, чтобы разобраться в наиболее распространенных проблемах. Но я действительно надеюсь, что новичок в React Native обнаружит это руководство, прежде чем приступить к неизбежно разочаровывающей миссии.

Если вы просто хотите узнать, как реализовать «быстрый» навигатор в React, сразу переходите к Легкий способ, где вы узнаете, как реализовать реактивную навигацию.

Для всех остальных, вот точный отчет о некоторых проблемах, с которыми вы столкнетесь, прежде чем внедрять навигацию, если будете заниматься этим в одиночку.

Проблема 1: Слишком много вариантов

Если вы новичок и ищете библиотеку для использования, вы наивно заглянете в документы и обнаружите все 4 рекомендуемых варианта. Имейте в виду, что это только те, которые сделали сокращение.

Оказывается, в сообществе React слишком много мнений о том, как создать навигатор, поэтому разные команды создали свои собственные.

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

Сделаю вам одолжение и сравним, на мой взгляд, два самых интересных навигатора. Сравним реактивную навигацию (от Facebook и Expo) с нативной навигацией (от AirBnb).

Последний не упоминается в документах, что еще больше подчеркивает мою точку зрения, однако он построен непосредственно поверх компонентов навигации iOS и Android. Это делает его идеальным для разработчиков, которые хотят совместить навигацию между компонентами React и собственным кодом. Тем не менее, он все еще находится в стадии бета-тестирования, и документация React четко рекомендует реактивную навигацию.

Проблема 2: Большинство библиотек либо устарели, либо должны быть

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

Проблема 3: Шаблон или нет?

Несколько компаний создали шаблоны проектов React Native различных размеров, начиная от нескольких предварительных конфигураций и заканчивая целыми средами разработки. Дело в том, что они помогают вам встать и работать. Некоторые из них также включают навигаторы, а другие — нет (чтобы еще больше запутать). Вот список головных болей:

Мне интересно попробовать Expo и Ignite. Но пока я ничего не выбираю, так как моя цель — делать все по-сложному. Я создаю новый проект стандартным способом с помощью react-native init MyAwesomeProject

Легкий путь

Вот пошаговый отчет о реализации реактивной навигации и устранении всех возникающих ошибок. Я следую официальному руководству по установке в документации.

  1. После создания проекта React Native устанавливаем react-navigation
# Install the latest version of react-navigation from npm
npm install --save react-navigation

Однако это установит [email protected], то есть ошибочную установку.

Исходя из опыта, новички этого не заметят и будут получать UnableToResolveError при компиляции. Об этой ошибке я расскажу ниже.

2. Чтобы правильно установить реагирующую навигацию, вы должны явно указать номер версии. Это можно найти в правой колонке на их странице NPM. На момент написания 1.0.0-beta.9

3. Запустите npm install еще раз с определенной версией

npm install --save [email protected]

4. Создайте новый файл router.js для определения ваших маршрутов.

Теперь у вас есть выбор различных навигаторов. Я буду придерживаться TabNavigator, так как он достаточно прост.

5. Определите свои маршруты в своем маршрутизаторе

import { TabNavigator } from 'react-navigation';
import MainScreen from '../screens/MainScreen'
import SetupScreen from '../screens/SetupScreen'
export const Tabs = TabNavigator({
  Main: {screen: MainScreen},
  Setup: {screen: SetupScreen},
});

6. Теперь вы можете добавить этот код в метод render() в MainScreen.js

const { navigate } = this.props.navigation;
return (
  <Button
    title="Go to Setup Tab"
    onPress={() => navigate('Setup')}
  />
)

7. Обязательно добавьте TabNavigator в корневой компонент.

import React, { Component } from 'react'
import { Tabs } from './config/router'
export default class App extends Component{
  render(){
    return <Tabs />
  }
}

Код в основном взят из документов по ​​реакции-навигации. Также Спенсер Карли более подробно все это объясняет на YouTube.

Трудный путь

Примечание. React быстро развивается, поэтому эти проблемы могут не возникнуть позже, когда вы найдете это руководство.

Навигатор определенно был узким местом прогресса на этой неделе, и я решил его всего за несколько часов до того, как начал эту статью. Короче говоря, я создал сводку всех ошибок и соответствующих им исправлений:

Не удалось разрешить модуль `react/lib/ReactComponentWithPureRenderMixin`

GitHub thread — временное исправление — перейти к package.json и заменить зависимость реакции-навигации на:

"react-navigation": "git+https://github.com/react-community/react-navigation.git"

затем выполните npm install, чтобы обновить зависимость, что приведет нас к следующей ошибке:

npm WARN неудовлетворенная зависимость

Поток переполнения стека — вам необходимо вручную установить модули верхнего уровня, которые имеют неудовлетворенные зависимости, и явно указать номер версии, как это сделано в разделе Простой способ, шаг 3.

«Невозможно разрешить модуль react-native-maps»… «Модуль не существует в карте модуля или в этих каталогах: /../node_modules

GitHub thread — это аналог синего экрана Windows в React Native. Решение состоит в том, чтобы просто удалить все зависимости и переустановить.

Есть много разных случаев этой ошибки, разбросанных по всему GitHub и StackOverflow. Обычно это исправляется выполнением следующих шагов:

  • Удалить папку node_modules - rm -rf node_modules && npm install
  • Сбросить кеш упаковщика — rm -fr $TMPDIR/react-* или node_modules/react-native/packager/packager.sh --reset-cache
  • Четкие часы сторожа — watchman watch-del-all
  • Воссоздать проект с нуля

Стилизация и Flexbox

Я закончу эту статью на более легкой ноте.

Давайте поговорим о стиле. В React Native вы определяете стиль своего макета с помощью CSS, за исключением случая с верблюдом. Итак, background-color теперь backroundColor. Это один из аспектов React Native, который идентичен React. Интересным моментом является то, что ваши стили — это всего лишь объекты JavaScript. Таким образом, вместо того, чтобы устанавливать #ids и .classes для ваших компонентов, как вы это делаете с CSS, вы напрямую ссылаетесь на объект. Еще более интересно то, что вы можете передавать стили в виде массива, где последний стиль перезаписывает все предыдущие, что фактически позволяет вам наследовать стили.

const styles = StyleSheet.create({
  bigblue: {
    fontSize: 30,
    fontWeight: 'bold',
    color: 'blue',
  },
  red: {
    color: 'red',
  },
});
// applies the styling defined in bigblue
<Text style={styles.bigblue}>just bigblue</Text>
// applies bigblue, then overwrites color with red
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>

Это подводит нас к Flexbox. Ответ на вопрос «Как заставить внешних разработчиков забыть свои таблицы умножения»?

Flexbox — это новый способ определения макета. Я не буду вдаваться в подробности, потому что в основном буду пересказывать документацию. Но моя любимая часть это flex и соотношения. Давайте посмотрим на пример:

WindowA имеет flex: 1, оно будет занимать 100% экрана. Если WindowB имеет flex: 2, это будет половина размера A, или коэффициент 1:2 (ура, математика!). Это гораздо легче визуализировать. Он принципиально меняет CSS с классической сетки на «эй, а что, если бы мы определяли размер и положение относительно друг друга?»

Подпишитесь на @arvinexplores в Instagram и Twitter, чтобы получать больше контента.