Главная » React

Ярлыки приложений в React Native: никогда не позволяйте ярлыкам приложений открывать случайные приложения 😂

На чтение 10 мин. Просмотров 33 Опубликовано

Привет, друзья,

В этой статье мы будем создавать ярлыки приложений для приложений React Native, как показано на изображении. Мы будем создавать их с помощью библиотеки react-native-app-shortcuts.

Прежде всего!!!

node --version
 v16.14.1
npm --version
 8.5.0
java --version
 openjdk 11.0.11 2021-04-20
Войдите в полноэкранный режим Выход из полноэкранного режима
Содержание
  1. Создайте новое приложение React Native, используя следующие команды —
  2. Установим зависимости
  3. Начнем путешествие по коду ->
  4. Шаги для создания экранов Home.js, Chat.js и Notification.js
  5. Home.js
  6. Chat.js
  7. Notification.js
  8. Давайте создадим ярлыки приложений для нашего приложения ->
  9. Важные вещи, которые следует отметить —

Создайте новое приложение React Native, используя следующие команды —

npx react-native init [YOUR_PROJECT_NAME] --version 0.68.2
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание — Я использую 0.68 версию React Native. Если вы обновили React Native до последней версии, вы можете создать приложение с помощью команды ->

npx react-native init [YOUR_PROJECT_NAME]
Войти в полноэкранный режим Выйти из полноэкранного режима

Установим зависимости

Мы будем устанавливать навигационные зависимости для поддержки навигации между несколькими экранами в нашем приложении.

npm install @react-navigation/native @react-navigation/native-stack

npm install react-native-screens react-native-safe-area-context
Вход в полноэкранный режим Выход из полноэкранного режима

После установки навигационных зависимостей мы установим библиотеку react-native-app-shortcuts в наше приложение.

npm i react-native-app-shortcuts
Вход в полноэкранный режим Выход из полноэкранного режима

Итоговый файл package.json должен быть похож на этот ->

package.json

{
  "name": "RNAppShortcuts",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/native-stack": "^6.7.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-app-shortcuts": "^0.2.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/runtime": "^7.18.9",
    "@react-native-community/eslint-config": "^3.1.0",
    "babel-jest": "^28.1.3",
    "eslint": "^8.21.0",
    "jest": "^28.1.3",
    "metro-react-native-babel-preset": "^0.72.0",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Начнем путешествие по коду ->

  • Удалите код шаблона в App.js и убедитесь, что App.js выглядит следующим образом -&gt-.
App.js

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

const App = () => {

  return (
    <View>

    </View>
  );
};

const styles = StyleSheet.create({

});

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

  • Удалите константу styles и импорт из ‘react-native’.

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

  • Импортируйте NavigationContainer и createNativeStackNavigator() из ‘react-navigation/native’ и ‘react-navigation/native-stack’ соответственно.

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
Войдите в полноэкранный режим Выход из полноэкранного режима
  • Измените оператор возврата в файле App.js. Верните NavigationContainer, который заключает в себе наш Stack.Navigator, внутри которого определены все наши экраны вместе с их именами и компонентами.
return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeComponent} />
        <Stack.Screen name="Notification" component={NotificationComponent} />
        <Stack.Screen name="Chat" component={ChatComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
Вход в полноэкранный режим Выход из полноэкранного режима
  • Далее мы определим эти компоненты, а именно — HomeComponent, NotificationComponent и ChatComponent.

В том же файле App.js создайте три константы типа ->

const NotificationComponent = ({navigation}) => {
  return (
    <>
      <Notification navigation={navigation} />
    </>
  );
};

const ChatComponent = ({navigation}) => {
  return (
    <>
      <Chat navigation={navigation} />
    </>
  );
};

const HomeComponent = ({navigation}) => {
  return (
    <>
      <Home navigation={navigation} />
    </>
  );
};
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Импортируйте экраны Chat, Home, Notification в виде ->
import Notification from './src/Notification';
import Chat from './src/Chat';
import Home from './src/Home';
Войти в полноэкранный режим Выйти из полноэкранного режима

На этом этапе ваш App.js будет выглядеть следующим образом ->

App.js 

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Notification from './src/Notification';
import Chat from './src/Chat';
import Home from './src/Home';

const Stack = createNativeStackNavigator();

const NotificationComponent = ({navigation}) => {
  return (
    <>
      <Notification navigation={navigation} />
    </>
  );
};

const ChatComponent = ({navigation}) => {
  return (
    <>
      <Chat navigation={navigation} />
    </>
  );
};

const HomeComponent = ({navigation}) => {
  return (
    <>
      <Home navigation={navigation} />
    </>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeComponent} />
        <Stack.Screen name="Notification" component={NotificationComponent} />
        <Stack.Screen name="Chat" component={ChatComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

  • На этом этапе он может выдать ошибку, что экранов Home, Notification и Chat не существует, и поэтому они не могут быть импортированы.

  • Давайте исправим это.

  • Создайте папку src на уровне

  • Создайте 3 файла в папке src, а именно -> Home.js, Notification.js и Chat.js.

  • Также для иконок скачайте иконки Notification icon и Chat icon с соответствующих ссылок в формате .png и добавьте в структуру проекта приложения по адресу

android/app/src/main/res/drawable
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Ваша структура папок для добавления png файлов иконок будет ->

  • Ваша структура папок в конечном итоге должна выглядеть следующим образом ->

Шаги для создания экранов Home.js, Chat.js и Notification.js

Home.js

Создайте функциональный компонент с именем Home.js и экспортируйте его по умолчанию из этого файла.
Убедитесь, что каждый из экранов Home.js, Chat.js и Notification.js принимает объект notification в качестве props.

const Home = ({navigation}) => {
  return (
  );
};

export default Home;
Войдите в полноэкранный режим Выход из полноэкранного режима

Создайте константу styles и создайте homeStyle.

const styles = StyleSheet.create({
  homeStyle: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignSelf: 'center',
  },
});
Вход в полноэкранный режим Выйти из полноэкранного режима

homeStyle будет назначен единственному виду на главном экране со значением flex равным 1, чтобы он занимал все пространство.

Внутри метода return функционального компонента Home верните View со стилями как homeStyle, который содержит текстовый компонент как «Home Screen».

return (
    <View style={styles.homeStyle}>
      <Text>{'Home Screen'}</Text>
    </View>
  );
Вход в полноэкранный режим Выйти из полноэкранного режима

Home.js на этом этапе будет выглядеть как ->

Home.js 

import React from 'react';
import {Text, StyleSheet, View} from 'react-native';

const Home = ({navigation}) => {
  return (
    <View style={styles.homeStyle}>
      <Text>{'Home Screen'}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  homeStyle: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignSelf: 'center',
  },
});

export default Home;
Вход в полноэкранный режим Выход из полноэкранного режима

Chat.js

Аналогично создайте экран Chat.js со следующим кодом ->


Chat.js 

import React from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native';

const Chat = ({navigation}) => {
  return (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Notification');
      }}
      style={styles.cta1Style}>
      <Text style={styles.ctaTitleStyle}>{'Switch to Notifications'}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  cta1Style: {
    backgroundColor: 'red',
    padding: 20,
  },
  ctaTitleStyle: {
    color: 'white',
  },
});

export default Chat;
Вход в полноэкранный режим Выйти из полноэкранного режима

Notification.js

Аналогично создайте экран Notification.js со следующим кодом ->

import React from 'react';
import {StyleSheet, Text, TouchableOpacity} from 'react-native';

const Notification = ({navigation}) => {
  return (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Chat');
      }}
      style={styles.cta2Style}>
      <Text style={styles.ctaTitleStyle}>{'Switch to Chat'}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  cta2Style: {
    backgroundColor: 'blue',
    padding: 20,
  },
  ctaTitleStyle: {
    color: 'white',
  },
});

export default Notification;
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот и все… Теперь вы можете не видеть никаких ошибок, если все работает идеально…

Давайте создадим ярлыки приложений для нашего приложения ->

  • Импортируйте RNAppShortcuts из ‘react-native-app-shortcuts’ в файл App.js.

  • Внутри функционального компонента App перед оператором return создайте 2 действия с помощью RNAppShortcuts.addShortcut({})

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Notification from './src/Notification';
import Chat from './src/Chat';
import Home from './src/Home';
import RNAppShortcuts from 'react-native-app-shortcuts';

const Stack = createNativeStackNavigator();

const NotificationComponent = ({navigation}) => {
  return (
    <>
      <Notification navigation={navigation} />
    </>
  );
};

const ChatComponent = ({navigation}) => {
  return (
    <>
      <Chat navigation={navigation} />
    </>
  );
};

const HomeComponent = ({navigation}) => {
  return (
    <>
      <Home navigation={navigation} />
    </>
  );
};

const App = () => {
  RNAppShortcuts.addShortcut({
    id: '1',
    shortLabel: 'Notify',
    longLabel: 'Open Notifications',
    iconFolderName: 'drawable',
    iconName: 'notification',
  });
  RNAppShortcuts.addShortcut({
    id: '2',
    shortLabel: 'Chat',
    longLabel: 'Open Chats',
    iconFolderName: 'drawable',
    iconName: 'chat',
  });
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeComponent} />
        <Stack.Screen name="Notification" component={NotificationComponent} />
        <Stack.Screen name="Chat" component={ChatComponent} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
Войти в полноэкранный режим Выйти из полноэкранного режима

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

  • В файле Home.js импортируйте useEffect из React и создайте эквивалент useEffect() для ComponentWillMount() класса component для функционального компонента Home.

  • Также импортируйте RNAppShortcuts из ‘react-native-app-shortcuts’ для определения обработчика ярлыков приложения.

  • Этот useEffect будет срабатывать каждый раз, когда этот экран загружается или монтируется. Здесь мы определим наш обработчик App Shortcuts.

  • Обработчик ярлыков приложений создается с помощью RNAppShortcuts.handleShortcut(id => {});.

  • На данном этапе Home.js должен выглядеть как ->

Home.js 

import React, {useEffect} from 'react';
import {Text, StyleSheet, View} from 'react-native';
import RNAppShortcuts from 'react-native-app-shortcuts';

const Home = ({navigation}) => {
  useEffect(() => {
    RNAppShortcuts.handleShortcut(id => {
      console.log(id);
      if (id === '1') {
        navigation.navigate('Notification');
      } else if (id === '2') {
        navigation.navigate('Chat');
      }
    });
  }, []);

  return (
    <View style={styles.homeStyle}>
      <Text>{'Home Screen'}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  homeStyle: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignSelf: 'center',
  },
});

export default Home;
Вход в полноэкранный режим Выход из полноэкранного режима

Важные вещи, которые следует отметить —

  • В React Native есть несколько библиотек для создания ярлыков приложений.

  1. react-native-app-shortcuts

  2. react-native-quick-actions

  3. react-native-actions-shortcuts .

  • Ярлыки добавляются с помощью следующего кода, который принимает такие параметры, как id, shortLabel , longLabel, iconFolderName, где находится изображение ярлыка, iconName, который имеет некоторые правила именования.
RNAppShortcuts.addShortcut({
    id,
    shortLabel,
    longLabel,
    iconFolderName,
    iconName,
  });
Вход в полноэкранный режим Выход из полноэкранного режима

  • Изображения иконок должны быть добавлены в папки android и iOS в нужных местах.

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

  • Мы можем удалить ярлыки приложений с помощью

  • Мы можем удалить все ярлыки приложений с помощью

  • Статические ярлыки приложений — это ярлыки, которые создаются во время установки приложения.

  • Библиотека react-native-quick-actions поддерживает статические ярлыки приложений для устройств IOS.

  • Обработчик ярлыков приложений может быть создан с помощью функции

  • Обработчик принимает id, используя который мы можем выполнять различные операции при нажатии на разные ярлыки приложений.

Воооооооооооо!!! Мы завершили проект. Ура!!!

Следите за мной в Twitter, чтобы узнать больше о ReactNative и Flutter.

Оцените статью
devanswers.ru
Добавить комментарий