0

Только начал изучать React и столкнулся со следующей проблемой:

Имеется первый файл Main.js:

import React from 'react';
import { StyleSheet, Text, View, Pressable, Alert, StatusBar, Dimensions, useState } from 'react-native';
import { DrawerActions } from '@react-navigation/native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

import Support from './Support'

const WINDOW_HEIGHT = Dimensions.get('window').height;

const handleButtonPress = () => Alert.alert('Button pressed')

export default function Main({ navigation }) {
  return (
    <View style={styles.mainContainer}>
      <StatusBar backgroundColor={'#fdf38a'} barStyle='dark-content'/>
      <View style={styles.appBar}>
        <MaterialIcon name="menu" size={32} color="#2E2A00" backgroundColor={'none'} onPress={() => navigation.dispatch(DrawerActions.openDrawer())}/>
        <MaterialCommunityIcon name="lightning-bolt" size={36} color="#2E2A00" backgroundColor={'none'} />
        <MaterialIcon name="support-agent" size={32} color="#2E2A00" backgroundColor={'none'} onPress={() => navigation.navigate(Support)} />
      </View>
      <View style={styles.mainContent}>
        <Pressable style={styles.button} onPress={<Вызов Scanner>}>
          <FontAwesome5 name="charging-station" size={20} color="#2E2A00" style={styles.chargerIcon}/>
          <Text style={styles.buttonText}>Take charger</Text>
        </Pressable>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  mainContent: {
    alignItems: 'center',
    height: WINDOW_HEIGHT,
  },
  mainContainer: {
    backgroundColor: '#fffeef',
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fdf38a',
    borderRadius: 20,
    width: 175,
    height: 60,
    marginTop: 525,
    elevation: 20,
    shadowColor: '#fdf38a',
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 16,
    fontFamily: 'Montserrat-SemiBold',
    color: '#2E2A00',
  },
  chargerIcon: {
    marginRight: 10,
  },
  appBar: {
    alignSelf: 'stretch',
    flexDirection: 'row',
    backgroundColor: '#fdf38a',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 10,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  support: {
    width: 24,
    height: 24,
  },
});

И файл Scanner.js:

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { useFonts, Montserrat_400Regular, Montserrat_700Bold, Montserrat_600SemiBold } from '@expo-google-fonts/montserrat';
import AppLoading from 'expo-app-loading';

export default function Scanner() {

  let [fontsLoaded] = useFonts({
    MontserratRegular: Montserrat_400Regular,
    MontserratBold: Montserrat_700Bold,
    MontserratSemiBold: Montserrat_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } 

  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
}); 

Как я могу вызвать функцию Scanner() из Scanner.js принажатии на кнопку (onPress) в функции Main() в Main.js? Я пробовал: onPress={() => Scanner} но получил закономерную ошибку из-за неправильного использования хуков.

4
  • А чего вы вообще хотите добиться? У вас Scanner возвращает JSX
    – Hat
    19 мар 2022 в 12:26
  • @Hat Мне нужно отобразить этот JSX. Подозреваю, что есть другой способ это сделать
    – lian
    19 мар 2022 в 13:17
  • Хотите отобразить его блоком на том же экране или перейти на новый экран?
    – Hat
    19 мар 2022 в 13:22
  • @Hat отобразить блоком
    – lian
    19 мар 2022 в 13:25

1 ответ 1

1

Вы должны завести boolean переменную, где будет храниться, показывается ли ваш блок

const [isScanner, setIsScanner] = useState(false)

Далее добавить в return в Main.js сам компонент так, чтобы он показывался, если переменная равна true, место добавления выберите в соответствии с вёрсткой. При нажатии на кнопку, меняйте переменную на true

return (
    <View style={styles.container}>
        <Pressable style={styles.button} onPress={() => setIsScanner(true)}>
          <Text style={styles.buttonText}>Take charger</Text>
        </Pressable>
        {isScanner ? <Scanner/> : null}
    </View>
  );

При этом setIsScanner(false) будет скрывать блок

7
  • Выдаёт ошибку: "undefined is not a function" и указывает на место объявления переменной
    – lian
    19 мар 2022 в 21:27
  • useState импортировали?
    – Hat
    19 мар 2022 в 22:38
  • import { useState } from 'react';
    – Hat
    19 мар 2022 в 22:40
  • Случайно импортировал из 'react-native', сейчас заработало, но теперь проблема в другом. Мне нужно, чтобы сканнер закрывал весь экран и я помещаю "{isScanner ? <Scanner/> : null}" в самый верх основного контейнера, но в таком случае ничего не появляется. Если же я ставлю его после самой кнопки, как в примере, то он просто уходит за пределы экрана
    – lian
    20 мар 2022 в 0:12
  • 1
    Если новый экран, то с помощью react-navigation создаёте новый экран и по кнопке переходите на него. Если не переходить на новый экран, возможно, вам подойдут компоненты Modal reactnative.dev/docs/modal или ScrollView reactnative.dev/docs/scrollview. Можете попробовать применять разные стили к чему-нибудь в зависимости от видимости блока. В любом случае, это уже другой вопрос, и чтобы качественно помочь с вёрсткой, нужна песочница.
    – Hat
    20 мар 2022 в 6:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.