* Это руководство лучше всего подходит для людей, плохо знакомых с использованием и вложением навигаторов в React Native. Были сделаны следующие предположения: вы прошли процесс настройки и у вас уже есть готовое приложение для реагирования, и вы наткнулись на реакцию-навигацию.
Вы создали свой экран входа в систему и несколько других экранов, к которым вы хотите, чтобы пользователь мог получить доступ через панель навигации, например. с экрана входа на главный экран. Однако, поскольку вы в некоторой степени новичок в React Native, настройка навигаторов оказывается несколько сложной, поскольку для разных типов сценариев существуют разные навигаторы. Например, навигатор ящика используется, если вам нужен ящик навигации.
Что такое навигатор?
Проще говоря, навигатор - это компонент, который содержит маршруты, которые отображаются непосредственно на созданном вами экране. При навигации с помощью реакции-навигации вы должны назвать имя маршрута.
Какие бывают типы навигаторов?
В React Native есть различные виды навигаторов, которые вы можете использовать в зависимости от того, чего вы хотите достичь. Ниже приведены несколько примеров:
- Навигатор стека: самая базовая навигация, которая позволяет переходить с одного экрана на другой с помощью нажатия кнопки или сенсорного элемента.
- Навигатор по ящикам: создает ящик навигации, который используется для перехода от экрана к экрану. например меню приложения gmail / панель навигации
- Tab Navigator: создает навигатор / меню вкладок, которое позволяет переходить от экрана к экрану, например. меню / вкладки WhatsApp
Чтобы создать приложение с экраном входа в систему, которое переходит к представлению с навигационным ящиком, вам нужно будет вложить навигатор ящика в навигатор стека, с чем я боролся, когда только начинал.
Сегодня мы рассмотрим, как настроить вложенную навигацию для вашего приложения React Native с навигатором стека и ящика. В идеале после завершения у вас должен быть навигатор ящика, вложенный в навигатор стека.
-StackNavigator (i.e. Login Screen) -DrawerNavigator (i.e. Other app screens that are accessed via a navigation drawer )
Поехали!
Шаг первый
Создайте 3 файла: экран входа в систему (loginScreen.js), первый экран (screenOne.js) и второй экран (screenTwo.js). . Как только эти представления будут созданы и завершены, оставьте их, мы вернемся к ним, когда нам нужно будет перемещаться. Убедитесь, что у вас есть кнопка или любой сенсорный элемент.
Например:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
render() {
return (
<View>
<TouchableOpacity >
<Text style={styles.signUpThin}>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
//add your styles here
});
Шаг 2
Создайте файл app.js, в котором вы будете создавать и заполнять свой навигатор стека. Импортируйте навигатор стека из react-navigation. Чтобы заполнить навигатор стека, вам необходимо импортировать файлы для экранов, которые вы только что создали, и сопоставить их с заголовком маршрута, который вы должны вызывать во время навигации.
import React, { Component } from 'react';
import {
AsyncStorage,
StyleSheet,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginScreen from './login';
import ScreenOne from './screenOne.js';
const myStackNavigator= StackNavigator({
LoginRoute: { screen: LoginScreen },
ScreenTwoRoute: {
screen: ScreenOne,
headerStyle:{
backgroundColor:'#000000'
},
headerTintColor:'#ffffff'
},
},
);
export default class App extends Component {
render() {
return (
<myStackNavigator/>
);
}
}
Настройте все маршруты, необходимые для экранов, как показано выше. Первый маршрут должен быть первым экраном, который вы хотите видеть при запуске приложения. Верните константу навигатора внутри класса, как показано выше.
Вы, наверное, обратили внимание, что в response-native нет заставки по умолчанию, не волнуйтесь, мы рассмотрим это позже.
Шаг 3
В файл (ы) index.android.js / index.ios.js / index.js добавьте следующее и зарегистрируйте свой компонент:
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import app from './app/components/app.js'
AppRegistry.registerComponent('yourpackagename', () => app);
Это должно гарантировать, что app.js будет первым компонентом, загружаемым при запуске приложения.
Шаг 4
Создайте файл с именем drawerNavigator.js. В этом файле вы должны импортировать экраны ящиков и сопоставить каждый экран с маршрутом. Кроме того, вы должны настроить и стилизовать свой ящик здесь.
Не забудьте экспортировать константу ящика!
import React, {Component} from "react";
import {AppRegistry, ScrollView, Text, View, StyleSheet} from "react-native";
import {
DrawerItems,
DrawerNavigator,
DrawerView,
StackNavigator,
} from "react-navigation";
import Icon from 'react-native-vector-icons/Feather';
import ScreenOne from './screenOne.js'
import ScreenTwo from './screenTwo.js';
const DrawerContent = (props) => (
<ScrollView>
<View
style={{
height: 180,
backgroundColor:'rgba(0, 145, 150,1)'
}}
>
<GeneralHeader/>
</View>
<DrawerItems
activeTintColor = "rgba(0, 145, 150,1)"
labelStyle={{
fontFamily:'sans-serif'
}}
{...props}
/>
</ScrollView>
)
const NavDrawer = DrawerNavigator({
ScreenOneRoute: {
screen: ScreenOne,
navigationOptions: {
title: 'Screen One',
drawerLabel: 'Screen One',
drawerIcon: () => (
<Icon name="eye" size={15} color="#808080"/>
)
},
},
ScreenTwoRoute: {
screen: ScreenTwo,
navigationOptions: {
title: 'Screen Two',
drawerLabel: 'Screen Two',
drawerIcon: () => (
<Icon name="map-pin" size={15} color="#808080"/>
)
},
},
},
{
contentComponent: DrawerContent,
},
);
export default NavDrawer;
Шаг 5
Вернитесь к файлу app.js и отредактируйте навигатор стека. Удалите все упоминания первого экрана и добавьте экспортированную панель навигации (укажите маршрут и обработайте импортированную панель как экран).
import React, { Component } from 'react';
import {
AsyncStorage,
StyleSheet,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginScreen from './login';
import ScreenOne from './screenOne.js';// remove this line
import NavDrawer from './drawerNavigator.js';
const myStackNavigator= StackNavigator({
LoginRoute: { screen: LoginScreen },
DrawerRoute: {
screen: NavDrawer,
headerStyle:{
backgroundColor:'#000000'
},
headerTintColor:'#ffffff'
},
},
);
export default class App extends Component {
render() {
return (
<myStackNavigator/>
);
}
}
ШАГ 6
Наконец, вернитесь к экрану входа и используйте метод onPress и this.props.navigation.navigate для перехода от экрана входа к экрану. один (во вложенном навигаторе ящиков)!
Не забывайте, что вы можете использовать навигацию для передачи важных свойств (мы поговорим об этом гораздо позже!).
Используйте эту технику для перехода от экрана к экрану независимо от типа навигатора, который вы использовали, то есть this.props.navigation.navigate (‘RouteName’, {paramKey: paramValue})
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';
export default class Login extends Component {
render() {
return (
<View >
<TouchableOpacity onPress={() => this.props.navigation.navigate('DrawerRoute', {params: param})}>
<Text style={styles.signUpThin}>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
//add your styles here
});
Готово!
Очевидно, что это еще не все, однако это короткое руководство лучше всего подходит для новичков, которые только начинают понимать концепцию навигаторов и то, как их использовать в React Native. Для получения дополнительной информации прочтите документацию по реагированию и навигации или спросите в комментариях.
