Question

其余的错误消息表示“您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

这是我的 Camera.js 文件：

import React from 'react';
import {CameraKitCameraScreen, CameraType} from 'react-native-camera-kit';
import {SafeAreaView, StyleSheet, Text, View, Platform, TouchableHighlight } from 'react-native'
export class Camera extends React.Component {
 render() {
   return (
    <SafeAreaView style={{flex: 1}}>
        <View style={{flex: 1}}>
    <CameraKitCameraScreen
        ref={ref => {
        this.camera = ref;
      }}
      actions={{
        rightButtonText: 'Done',
        leftButtonText: 'Cancel'
        }}

      cameraType={CameraType.Back}
      captureAudio={false}
      Options={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
         />
        </View>
        <View style={styles.container}>
        </View>
     </SafeAreaView>
  );
};
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
    alignItems: 'center',
  },
  titleText: {
    fontSize: 22,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  textStyle: {
    color: 'black',
    fontSize: 16,
    textAlign: 'center',
    padding: 10,
    marginTop: 16,
  },
  buttonStyle: {
    fontSize: 16,
    color: 'white',
    backgroundColor: 'green',
    padding: 5,
    marginTop: 32,
    minWidth: 250,
  },
  buttonTextStyle: {
    padding: 5,
    color: 'white',
    textAlign: 'center',
  },
});

这是我在 App.js 中访问它的地方：

import * as React from 'react';
import { Button, SafeAreaView, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { gyroscope, accelerometer } from "react-native-sensors";
import Camera from './components/Camera';

function HomeScreen({ navigation }) {
enableScreens();
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
        <Button
        title="Inclinometer"
        onPress={() => navigation.navigate('Inclinometer')}
      />
    </SafeAreaView>
  );
}

function InclinometerScreen({ navigation }) {
enableScreens();
  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Inclinometer</Text>
        <Camera/>
    </SafeAreaView>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
        <Stack.Screen name="Inclinometer" component={InclinometerScreen} options={{ title: 'Inclinometer',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel', }}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我认为我正确地导出了我的 Camera.js 但是我认为我可能有一些奇怪的语法错误关于文件是否是正确的组件。

Answer 1

相机是命名导出（而不是默认），因此需要导入为

import { Camera } from './components/Camera';

元素类型无效：预期的字符串或类/函数但未定义

1 个答案: