Я недавно начал работать с react native и знаете что? Я не вернусь ни к каким фреймворкам или технологиям для внешнего интерфейса! Это настолько хорошо, насколько это возможно, и если вы новичок, чтобы реагировать, и на данный момент все не имеет смысла, подождите! Будет лучше 👍

Сегодня мы узнаем:

  • react-navigation-stack для создания простого браузера, такого как стек, для экранов в мобильном приложении.
  • реализация навигации по нижней вкладке с использованием вкладок response-navigation и response-navigation-tabs
  • бонус (да! почему бы и нет?) интеграция реагирующих векторных иконок, чтобы ваше приложение выглядело круче 🔥

Создайте простой проект, поддерживающий реакцию, используя npx react-native init AwesomeProject.

Приступим!

Перво-наперво! Нам нужны следующие пакеты, поэтому добавьте эти строки в объект dependencies вашего файла package.json. Я бы порекомендовал использовать эти пакеты как таковые, потому что было много неправильного управления версиями, когда я пробовал это в первый раз.

«Реагировать-навигация»: «^ 4.3.9»,

«Реагировать-навигационный стек»: «^ 2.7.0»,

«Реагировать-навигации-вкладки»: «^ 2.10.1»,

«Реагировать-родные-векторные иконки»: «^ 7.1.0»,

Наконец, выполните установку npm, и все готово. Давайте погрузимся в кодирование !!

Создать навигационный сервис

Создайте файл NavigationService.js и скопируйте и вставьте в него следующий код. Этот файл экспортирует две функции, setTopLevelNavigator - это то место, куда мы будем передавать навигационную ссылку из нашего файла App.js (это обсуждается в следующем разделе, уф !!!).

Хотите прочитать эту историю позже? Сохранить в журнале.

Затем у нас есть функция навигации, которая принимает два параметра: routeName, т.е. имя нового маршрута, и params, любые параметры, которые вы хотите передать новому экрану, который мы ' повторный переход к.

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

Определите стек вашего приложения

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

createStackNavigator (RouteConfigs, StackNavigatorConfigs)

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

const appStack = createStackNavigator(
   {
      //Route name
      HomeScreen:{
         screen: HomeScreenComponent //React component for home screen
      },
   }
)

Здесь у нас только один экран, то есть Home. Мы можем добавить сюда столько экранов, сколько требуется нашему приложению. Обратите внимание, что эти экраны будут располагаться друг над другом во время навигации. Теперь для нашей реализации нижней вкладки нам нужно кое-что еще.

createBottomTabNavigator (RouteConfigs, TabConfigs)

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

Второй параметр в обеих этих функциях является необязательным и используется в зависимости от использования. Мы будем использовать некоторые из них, и я объясню их на ходу

Итак, теперь создайте новый файл AppNavigation.js

Нам нужна нижняя вкладка с тремя экранами, которые можно создать с помощью

import { createBottomTabNavigator } from 'react-navigation-tabs'
//example home screen
const HomeScreen = (props) => {
  return (
    <View>
       <Text>Hello from home screen</Text>
    </View>
  );
}
const bottomTabNav = createBottomTabNavigator(
{
   HomeScreen: {
    screen: HomeScreen
   },
   AddScreen: {
    screen: AddScreen
   },
   SettingsScreen: {
    screen: SettingsScreen
   },
   //add other tabs here
},
{
   initialRouteName: 'HomeScreen' //Name of the preselected tab
}
)

Но нам также нужен навигатор стека, где Home может быть нижним экраном навигации, который мы создали выше с помощью createBottomTabNavigator, и другие экраны в стеке также могут быть там. Итак, создайте навигатор стека в вашем AppNavigator.js следующим образом

import { createStackNavigator } from 'react-navigation-stack'
const AppStack = createStackNavigator(
  {
    Home: {
      screen: bottomTabNav  //bottom tab
    },
    //add other screens here
  }
)

Теперь, наконец, оберните свой AppStack с помощью createAppContainer из «response-navigation» и экспортируйте его. Нам нужно обернуть наше полное приложение в этот контейнер.

import { createAppContainer } from 'react-navigation'
const AppContainer = createAppContainer(AppStack)
export default AppContainer;

Наконец, оберните ваше приложение только что созданным AppContainer. С контейнером приложения мы получаем ссылку на опору с ссылкой навигации (navigationRef). Помните функцию setTopLevelNavigator из файла NavigationService.js? Установите ссылку, используя его.

import { setTopLevelNavigator } from 'NavigationService';
const App = () => {
  return (
    <AppContainer
       ref={navigationRef => {
          NavigationService.setTopLevelNavigator(navigationRef)
       }}
     />
  );
};

Готово! Теперь вы могли видеть простую нижнюю вкладку в своем приложении. Но это не выглядит хорошо, правда? Время для украшения !!

Добавление векторных иконок и оттенков

Обновите свой код bottomTabNav, чтобы добавить некоторые пользовательские функции

import { BottomTabBar } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/dist/Ionicons';
const bottomTabNav = createBottomTabNavigator(
{
   HomeScreen: {
    screen: HomeScreen
   },
   AddScreen: {
    screen: AddScreen
   },
   SettingsScreen: {
    screen: SettingsScreen
   },
   //add other tabs here
},
{
   initialRouteName: 'HomeScreen',
   tabBarComponent: (props) => <BottomTabBar {...this.props)/>,
   defaultNavigationOptions: ({ navigation }) => ({
     tabBarIcon: ({focused, horizontal, tintcolor}) => {
       const { routeName } = navigation.state;
       let iconName;
       if (routeName === 'HomeScreen') {
         iconName = focused? 'home': 'home-outline';
       } else if (routeName === 'Settings') {
         iconName = focused? 'cog': 'cog-outline';
       } else if(routeName === 'Add') {
         iconName = 'add'
       }
       return <Icon 
                name={iconName} 
                size={25} 
                color={focused? 'tomato': 'grey'} />;
     },
   }),
   tabBarOptions: {
     activeTintColor: 'tomato',
     inactiveTintColor: 'grey'
   }
}
)

Сохраните и перезагрузите! Теперь у вашего приложения будет нижняя панель навигации с настраиваемыми значками и красноватым оттенком.

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

Напишите мне в twitter или instagram 👋

Вы можете узнать больше о реакции-навигации в их официальной документации.

Не забудьте прочитать больше этих полезных статей на моей странице.

📝 Сохраните эту историю в Журнале.