React Native - ящик и разрешения

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

В этой статье мы рассмотрим, как использовать его для создания приложения с React Native.

DrawerLayoutAndroid

Мы можем добавить макет выдвижного ящика в наше приложение для Android с помощью компонента DrawerLayoutAndroid.

Например, мы можем написать:

import React, { useState } from 'react';
import { Button, DrawerLayoutAndroid, Text, StyleSheet, View } from "react-native";
export default function App() {
  const [drawerPosition, setDrawerPosition] = useState("left");
  const changeDrawerPosition = () => {
    if (drawerPosition === "left") {
      setDrawerPosition("right");
    } else {
      setDrawerPosition("left");
    }
  };
  const navigationView = (
    <View style={styles.navigationContainer}>
      <Text style={{ margin: 10, fontSize: 15 }}>I'm in the Drawer!</Text>
    </View>
  );
  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={drawerPosition}
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={{ margin: 10, fontSize: 15 }}>
          DrawerLayoutAndroid example
        </Text>
        <Button
          title="Change Drawer Position"
          onPress={() => changeDrawerPosition()}
        />
        <Text style={{ margin: 10, fontSize: 15 }}>
          Drawer on the {drawerPosition}! Swipe from the side to see!
        </Text>
      </View>
    </DrawerLayoutAndroid>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingTop: 50,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  navigationContainer: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: "#fff",
    padding: 8
  }
});

У нас есть состояние drawerPosition для изменения положения ящика.

Button принимает опору onPress, которая принимает функцию, вызывающую changeDrawerPosition для переключения положения ящика.

Компонент DrawerLayoutAndroid имеет ящик.

drawerWidth соответствует ширине ящика.

drawerPosition устанавливает положение ящика.

renderNavigationView - это функция, которая отображает содержимое ящика.

Затем, когда мы перетащим влево или вправо, мы увидим ящик.

РазрешенияAndroid

Мы можем добавить объект PermissionsAndroid, чтобы мы могли запрашивать разрешения в нашем приложении.

Например, мы можем написать:

import React from 'react';
import { StyleSheet, Text, View, PermissionsAndroid, Button } from "react-native";
import Constants from "expo-constants";
const requestCameraPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Camera Permission",
        message:
          "Can I use the Camera?",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("You can use the camera");
    } else {
      console.log("Camera permission denied");
    }
  } catch (err) {
    console.warn(err);
  }
};
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.item}>Try permissions</Text>
      <Button title="request permissions" onPress={requestCameraPermission} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  item: {
    margin: 24,
    fontSize: 28,
    fontWeight: "bold",
    textAlign: "center"
  }
});

Мы добавляем функцию requestCameraPermission, которая вызывает метод PermissionAndroid.request для запроса разрешения.

Аргумент PermissionsAndroid.PERMISSIONS.CAMERA означает, что мы хотим получить разрешения для камеры.

Второй аргумент имеет объект с некоторыми свойствами.

title - это заголовок диалогового окна запроса разрешения.

message - это сообщение для диалогового окна запроса разрешения.

buttonNeutral - текст, отображаемый при нейтральном выборе.

buttonNegative - это текст кнопки отказа в разрешении.

buttonPosition - это текст кнопки для принятия разрешения.

Он возвращает обещание с выбором разрешения.

Мы можем проверить, предоставлено ли оно, проверив PermissionsAndroid.RESULTS.GRANTED.

Заключение

Мы можем добавить ящик и запросить разрешения с помощью библиотеки React Native.