Автор оригинала: Ezekiel Ekunola.
В этой статье мы будем охватывать различные типы навигаций, а также как объединить их вместе в реагированной реакции с использованием реактивных навигаций 5.
Стол содержания
- Предварительное условие
- Настройка проекта
- Настройка экранов
- Установка зависимостей
- Стек навигатора
- Вкладка Навигатор
- Ящик навигатора
- Заключение
Предварительное условие
Чтобы иметь возможность следить за этой статьей, вы должны иметь следующую настройку в вашей местной среде
Узел установлены.
Эмулятор для проверки приложения. Вы можете использовать либо Android Studio или Xcode Отказ
Настройка проекта
Чтобы настроить реагировать нативный проект, вы можете использовать React Nature CLI или EXPO CLI.
Я бы использовал Expo CLI для создания реагировать нативный проект. Для этого запустите следующую команду на вашем терминале.
npm install -g expo-cli
Вышеуказанная команда будет установить EXPO CLI на вашу машину.
Примечание: Вам нужно иметь Узел V12 Установлено на вашем компьютере, чтобы установить EXPO CLI, используя командную строку.
После того, как вышеуказанная команда выполняется успешно, запустите команду ниже, чтобы создать/создать реагировать нативный проект.
expo init project-name
Как только приведенная выше команда работает успешно, откройте проект в желаемом редакторе кода и запустите NPM начать на терминале, чтобы начать приложение.
Чтобы настроить реагировать нативный проект, используя реактивную CLI, проверьте здесь .
Навигационные зависимости и настройки навигации
Ниже приведены зависимости являются основной утилитой, используемой навигаторами для создания структуры навигации, а также нашей навигации стека, вкладки и ящики.
В вашем каталоге проекта запустите команду ниже на вашем терминале
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs @react-navigation/drawer
Эти зависимости ниже зависимости опираются на жесты, анимации и переходы. Кроме того, запустите команду ниже на вашем терминале, чтобы установить зависимости.
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
В корневом файле нашего приложения в этом случае App.js Файл, мы настроили нашу реактивный навигацию там.
// ./App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
const App = () => {
return {/* Navigation here */} ;
}
export default App;
Настройка экранов
Следующим шагом будет настроить экраны, которые будут использоваться в нашем приложении.
Я бы создал 3 экрана с целью этой демонстрации, не стесняйтесь просто скопировать их.
Поэтому я установил их в каталоге экранов. Создать Экраны каталог в корне проекта и добавить компоненты ниже
Домашний экран
// ./screens/Home.js
import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";
const Home = () => {
return (
This is the home screen
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default Home;
О экране
// ./screens/About.js
import React from "react";
import { View, StyleSheet, Text } from "react-native";
const About = () => {
return (
This is the about screen
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default About;
Экран контакта
// ./screens/Contact.js
import React from "react";
import { View, StyleSheet, Text } from "react-native";
const Contact = () => {
return (
This is the contact screen
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default Contact;
Стек навигации
Stack Navigation обеспечивает способ реактивных приложений для перехода между экранами с использованием стека, что означает, что экраны укладываются друг на друга.
Например, если вы ориентируетесь от входа в систему входа в систему, экран регистрации включается в верхней части экрана входа в систему, и если вы навигаетесь назад, экран регистрации затем выходит из стека.
Чтобы настроить стек навигации, я бы создал навигация каталог в корне нашего проекта. Внутри нашего недавно созданного каталога я также создал Stacknavigator.js Файл там и добавьте нашу настройку навигации стека.
Примечание. Вы можете решить назвать папки и файлы, однако вы хотите
// ./navigation/StackNavigator.js
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import About from "../screens/About";
const Stack = createStackNavigator();
const MainStackNavigator = () => {
return (
);
}
export { MainStackNavigator };
Вы также можете настроить и стиль навигацию стека, добавив Широмы стиль опоры, см. Основной пример ниже
// ./navigation/StackNavigator.js
const MainStackNavigator = () => {
return (
);
}
Вернуться в нашу App.js Файл, мы можем импортировать и добавить наш вновь созданный стек навигатора. Итак, наше App.js файл будет выглядеть как код ниже
// ./App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { MainStackNavigator } from "./navigation/StackNavigator";
const App = () => {
return (
);
}
export default App
Теперь, если мы запустим код на нашем эмуляторе, мы теперь должны увидеть наш домашний рендеринг экрана на наших экранах стека.
Помните в нашем ./sreens/home.js Файл, у нас была кнопка, которая ничего не сделала, но, поскольку у нас есть наша навигация навигации стека, теперь мы можем получить доступ к навигационному опору, введенному навигацией стека, который может помочь нам выполнить множество операций, один из которых перенаправляет.
Так перемещайтесь на ./sreens/home.js и добавьте код ниже.
// ./screens/Home.js
import React from "react";
import { View, Button, Text, StyleSheet } from "react-native";
const Home = ({ navigation }) => {
return (
This is the home screen
);
};
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
textAlign: "center",
},
});
export default Home;
В вышеупомянутом коде мы получаем навигационную опору, который является объектом, который имеет функцию навигации, которую мы тогда вызовите передачу во имя экрана, который мы хотим перейти к нажатую кнопку.
И там у нас есть, мы теперь можем перемещаться между экранами, используя нашу навигацию стека.
Вкладка навигация
Вкладка навигация – это навигация, которая является вкладками в нижней или верхней части экрана и может использоваться для переключения между различными экранами.
Вкладка навигация может принимать либо на экран как компонент, либо стек в качестве компонента.
В нашем Stacknavigator.js Файл, давайте создадим другой стек для нашего контактного экрана. Итак, наше Stacknavigator.js будет выглядеть как ниже
// ./navigation/StackNavigator.js
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import About from "../screens/About";
import Contact from "../screens/Contact";
const Stack = createStackNavigator();
const screenOptionStyle = {
headerStyle: {
backgroundColor: "#9AC4F8",
},
headerTintColor: "white",
headerBackTitle: "Back",
};
const MainStackNavigator = () => {
return (
);
}
const ContactStackNavigator = () => {
return (
);
}
export { MainStackNavigator, ContactStackNavigator };
Затем мы можем создать другой файл Tabnavigator.js В Навигация каталог и добавьте разметку для нашего Табнавигатор
// ./navigation/TabNavigator.js
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MainStackNavigator, ContactStackNavigator } from "./StackNavigator";
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
);
};
export default BottomTabNavigator;
А потом вернуться в нашу App.js Файл, теперь мы можем импортировать наши вновь созданные Табнавигатор и использовать его там.
// ./App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import BottomTabNavigator from "./navigation/TabNavigator";
const App = () => {
return (
);
}
export default App
Навигация ящика
Навигация ящики – это выдвижная и скользящая ящик, который содержит ссылки на различные экраны. Навигация ящики открывается, когда нажат значок меню или когда пользователь переключает палец с левого или правого края приложения.
Чтобы создать навигацию ящики, мы бы создадим другой файл в нашем Навигация каталог называется Drawernavigator.js.
В этом файле мы бы добавили нашу навигатор навигатора
// ./navigation/DrawerNavigator.js
import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { ContactStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
return (
);
}
export default DrawerNavigator;
А потом вернуться в нашу App.js Файл, теперь мы можем импортировать наши вновь созданные Drawernavigtor.js Файл и используйте его как наш навигатор.
// ./App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import DrawerNavigator from "./navigation/DrawerNavigator";
const App = () => {
return (
);
}
export default App;
Существуют также параметры конфигурации и значки заголовка, которые вы можете добавить, чтобы настроить навигацию ящики. Узнайте больше здесь Отказ
Заключение
В этой статье мы смогли посмотреть, как настроить и комбинировать навигацию стека, вкладки и ящики для нашего нативного приложения React-National, используя React-Navigation 5.
Исходный код, используемый в демонстрации этой статьи, можно найти здесь Отказ
Если у вас есть какие-либо вопросы или отзывы об этой статье, не стесняйтесь оставить комментарий.
Спасибо за прочтение.