Question

我有一个Expo应用程序，其中显示了3个标签，当我转到“相机”时选项卡我总是会出错。我几乎尝试了所有解决方案，但这并不能奏效。

错误为：“不变违规：元素类型无效，预期为字符串（对于内置组件）或类/函数（对于复合元素），但未定义。您可能忘记了从其文件中导出组件中定义，否则您可能混淆了默认导入和命名导入。检查“ CameraExample”的渲染方法

这是树：

！https://nsa40.casimages.com/img/2019/01/24/190124124747913567.png

这是我的文件index.js：

import { TabNavigator } from 'react-navigation';
import LoginForm from './LoginForm';
import SignUpForm from './SignUpForm';
import CameraExample from './CameraExample';

const routeConfigs = {
Login: {
    screen: LoginForm,
},
SignUp: {
   screen: SignUpForm,
},
Camera: {
   screen: CameraExample,
},
};

const tabBarOptions = {
tabBarOptions: {
activeTintColor: '#88cc88',
inactiveTintColor: '#aaaaaa',
showIcon: true,
scrollEnabled: false,
indicatorStyle: {
  display: 'none',
  },
   style: {
    backgroundColor: '#ffffff',
   },
 },
 tabBarPosition: 'bottom',
};

export default TabNavigator(routeConfigs, tabBarOptions);

CameraExample / Component.js

import { Camera, Permissions } from 'expo';
import React, { Text, View, Component } from 'react';

class CameraExample extends Component {
   state = {
    hasCameraPermission: null,
    type: Camera.Constants.Type.back,
};

async componentDidMount() {
  const { status } = await Permissions.askAsync(Permissions.CAMERA);
  this.setState({ hasCameraPermission: status === 'granted' });
}

render() {
  const { hasCameraPermission, type } = this.state;
  if (hasCameraPermission === null) {
    return <View />;
  } if (hasCameraPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }} type={type}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}
        >
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={() => {
              this.setState({
                type: type === Camera.Constants.Type.back
                  ? Camera.Constants.Type.front
                  : Camera.Constants.Type.back,
              });
            }}
          >
            <Text
              style={{ fontSize: 18, marginBottom: 10, color: 'white' }}
            >
              {' '}
             Flip
              {' '}
            </Text>
          </TouchableOpacity>
         </View>
       </Camera>
      </View>
    );
   }
 }

module.exports = CameraExample;

和CameraExample / index.js

export { default } from './Component';

Answer 1

我认为需要这样写

CameraExample / index.js

import Component from './Component'
export default Component

OR

module.exports = require('./Component')

如何修复错误元素类型无效，预期字符串？

1 个答案: