Привет, разработчики! Добро пожаловать в совершенно новое руководство по рисованию React Native. Итак, в этом уроке мы собираемся создать собственный ящик реакции с помощью React Navigation, а также создадим экран-заставку. Довольно мило, да? Так что давайте прямо в это дело!
Поэтому перед написанием кода я просто хотел показать вам, что мы на самом деле собираемся сделать сегодня, чтобы вы могли иметь краткое представление о том, как все работает, прежде чем писать код.
Если вы хотите напрямую перейти к коду, вы можете проверить исходный код этого руководства в моем репозитории Github: https://github.com/Rits1272/DrawerNavigation.
Итак, сначала нам нужно создать проект React Native. Я буду использовать здесь response-native-cli, но вы также можете использовать expo. Так что запустите свой терминал и напишите:
react-native init app
Далее мы установим зависимости. Как было сказано ранее, мы будем использовать React Navigation. React Navigation - это, по сути, отдельная библиотека, которая позволяет разработчикам настраивать экран и свою навигацию с помощью нескольких строк кода. Вы можете узнать больше о реакции-навигации здесь. Итак, в терминале внутри каталога вашего проекта установите зависимости:
npm i --save react-navigation npm i --save react-navigation-stack npm i --save react-navigation-drawer
React-navigation также требует некоторых зависимостей, как описано в официальной документации. Итак, мы установим эти зависимости:
npm i --save react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
Теперь нам нужно связать эти зависимости. Итак, в вашем терминале:
react-native link react-native-gesture-handler react-native link react-native-reanimated react-native link react-native-safe-area-context react-native link react-native-screens
Если вы думаете, почему мы связываем зависимости после его установки, потому что новые добавленные собственные модули должны быть связаны, потому что они выходят за «область действия по умолчанию» проекта и для того, чтобы быть доступными для платформы RN, они должны следовать привязке процесс.
Для значка гамбургера в нашем ящике мы будем использовать векторные иконки react-native-vector. Поэтому обязательно установите его и свяжите с нашим приложением.
npm i --save react-native-vector-icons react-native link react-native-vector-icons
Итак, после установки мы готовы написать код. Таким образом, навигатор, который творит чудеса создания выдвижного ящика в приложении в реакции-навигации, - это createDrawerNavigator.
В этом приложении мы создадим три экрана: один - это главный экран, а два других - экран «О программе» и экран настроек. Мы также будем создавать заставку.
Итак, сначала пошагово создадим три экрана: Home.js, About.js и Settings.js. Итак, создайте папку «src» и под ней создайте три вышеуказанных файла. Каталог вашего проекта должен выглядеть так:
В файле Home.js напишите следующий базовый код:
import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
export default class Home extends Component {
static navigationOptions = {
title : "Home"
}
render() {
return (
<View style={styles.container}>
<Text style={{fontSize : 25, marginBottom : 20}}>HOME SCREEN</Text><Button
title='About'
onPress = {() => this.props.navigation.navigate('About')}
/></View>
);
}}
const styles = StyleSheet.create({
container: {
flex : 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Вы можете скопировать и вставить тот же код на экран «О программе» и «Настройка», заменив имя класса на «О программе» и «Настройка» соответственно. Теперь у нас есть три экрана для навигации по ящику.
Мы также сделаем здесь заставку. Итак, создайте файл Splash.js внутри своей папки src и напишите следующий код.
import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
export default class Splash extends Component {
async componentDidMount() {
// You can load api data or any other thing here if you want
const data = await this.navigateToHome();
if (data !== null) {
this.props.navigation.navigate('Home');
}}
navigateToHome = async () => {
// Splash screen will remain visible for 2 seconds
const wait = time => new Promise((resolve) => setTimeout(resolve, time));
return wait(2000).then(() => this.props.navigation.navigate('Home'))
};
render() {
return (
<View style={styles.container}>
<Text style={{fontSize: 25}}>SPLASH SCREEN</Text>
</View>
);
}}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
В основном на заставке мы создаем обещание. После выполнения обещания мы переходим на главный экран. Здесь вы могли заметить, что мы использовали функцию setTimeout, в которой временной интервал составляет 2000 мс. Этот временной интервал определяет, сколько времени мы хотим показывать пользователю экран-заставку. Между тем, за эти 2 секунды вы также можете загрузить свой API (если есть).
Далее идет основная часть создания потока навигации в нашем приложении. В файле App.js напишите следующий код:
import React from 'react';
import {TouchableOpacity} from 'react-native';
// react-navigation
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/FontAwesome';
// importing screens
import Home from './src/Home';
import Setting from './src/Setting';
import About from './src/About';
import Splash from './src/Splash';
// Adding Home and About in the same stack allows us to navigate to // About from Home and from Home to About screen
const HomeNavigator = createStackNavigator(
{
'Home': {screen: Home,
navigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="indent" size={25} /></TouchableOpacity>
)})
},
'About': {screen: About}
});
// Our second screen in the drawer will be Setting
const SettingNavigator = createStackNavigator(
{
'Setting': {screen: Setting}
},{
defaultNavigationOptions: ({navigation}) => ({
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 20}}
onPress={() => navigation.toggleDrawer()}>
<Icon name="indent" size={25} />
</TouchableOpacity>
),
}),
});
// This navigator makes the drawer
const DrawerNavigator = createDrawerNavigator({
Home: {
navigationOptions: {
drawerLabel: 'Home', // Name shown in the drawer of the screen
},
screen: HomeNavigator,
},
Setting: {
navigationOptions: {
drawerLabel: 'Setting',
},
screen: SettingNavigator,
}});
// We used createSwitchNavigator because we don't want our user to // navigate back to Splash screen by pressing back button. Hence
// Splash screen just get seen once by the user.
const AppSwitchNavigator = createSwitchNavigator({
'Splash' : {screen : Splash},
'Drawer' : {screen : DrawerNavigator}
},
{
initialRouteName : 'Splash' // Telling the navigator that the first // route is Splash screen
})
const App = createAppContainer(AppSwitchNavigator);
export default App;
Итак, давайте разберем этот код. Сначала мы создали два навигатора стека с помощью createStackNavigator. Наш первый StackNavigator - это «HomeNavigator», а второй - «SettingNavigator». StackNavigators, как следует из названия, позволяет нам создавать стек экранов, который позволяет нам легко перемещаться между экранами, присутствующими в стеке. Итак, как вы, возможно, видели в демонстрационном видеоролике, показанном в начале, мы переходим от главного экрана к «О программе» и от «О программе» к главному экрану, поэтому мы добавили главный экран и экран «О программе» в один и тот же стек (который является HomeNavigator).
Затем мы создали SettingNavigator, который является еще одним навигатором, похожим на HomeNavigator. Мы не добавляли дополнительных экранов в этот навигатор. Но при желании можно легко добавить дополнительные экраны.
Теперь идет DrawerNavigator. Мы добавляем все экраны, которые хотим показать в ящике. Мы хотим показать главный экран и экран настроек в ящике. Поэтому мы добавили HomeNavigator и SettingNavigator в наш DrawerNavigator.
Наконец, мы добавили наш экран-заставку. Вам может быть интересно, почему мы использовали createSwitchNavigator вместо createStackNavigator. Причина вполне очевидна. Если бы мы использовали StackNavigator, то после того, как пользователь перейдет с экрана-заставки на главный экран, пользователь может нажать кнопку «Назад», и он может вернуться к экрану-заставке, а мы, очевидно, этого не хотим. SwitchNavigator предотвращает это.
Наконец, мы создали AppContainer для SwitchNavigator.
Итак, я сделал обзор навигации в нашем приложении с высоты птичьего полета.
Надеюсь, вы поняли, как создать ящик и заставку в своем приложении. Лично мне было очень трудно добавить их в одно из моих приложений, поэтому я подумал о написании этой статьи, чтобы помочь другим разработчикам сэкономить их время.
Большое спасибо! Никогда не забывайте ставить точки с запятой; ). Adios
