Только начал изучать 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} но получил закономерную ошибку из-за неправильного использования хуков.