React Native — это фреймворк, который позволяет создавать собственные мобильные приложения с использованием JavaScript и React. В этой статье мы узнаем, как создать простое приложение React Native с одним экраном, которое может включать и выключать фонарик вашего устройства. Мы будем использовать библиотеку react-native-torch
для доступа к функциям фонарика.
Установка зависимостей
Чтобы использовать библиотеку react-native-torch
, нам нужно установить ее и связать с нашим проектом. Откройте терминал и выполните следующие команды:
npm install react-native-torch --save
npx react-native link react-native-torch
Вам также может потребоваться добавить некоторые разрешения в ваш проект Android или iOS, чтобы использовать фонарик. Инструкцию о том, как это сделать, вы можете найти здесь.
Создание пользовательского интерфейса
Теперь, когда мы установили библиотеку, мы можем приступить к созданию пользовательского интерфейса для нашего приложения. Откройте файл App.js
в редакторе кода и замените его содержимое следующим кодом:
// App.js import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, Switch } from 'react-native'; import Torch from 'react-native-torch'; const App = () => { // State variable for flashlight status const [isTorchOn, setIsTorchOn] = useState(false); // Function to handle switch toggle const toggleSwitch = () => { setIsTorchOn(previousState => !previousState); }; // Effect hook to update flashlight status useEffect(() => { Torch.switchState(isTorchOn); // Turn on/off the flashlight }, [isTorchOn]); // Run only when isTorchOn changes return ( <View style={styles.container}> <Text style={styles.title}>Flashlight App</Text> <Text style={styles.label}>Turn on/off the flashlight</Text> <Switch trackColor={{ false: '#767577', true: '#81b0ff' }} thumbColor={isTorchOn ? '#f5dd4b' : '#f4f3f4'} ios_backgroundColor="#3e3e3e" onValueChange={toggleSwitch} value={isTorchOn} /> </View> ); }; // Styles for UI elements const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', alignItems: 'center'…