Question

运行我的应用程序时，出现错误：“路线“相机”的组件必须是React组件”。我不知道这是什么意思：

这是我的App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator}  from 'react-navigation-stack';
import Home from './screens/Home';
import Camera from './screens/Camera'

const MainNavigator = createStackNavigator(
  {
    Home: {screen: Home},
    Camera: { screen: Camera}
  },
  {
    defaultNavigationOptions: {
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor: '#b83227'
      },
      headerTitleStyle: {
        color: '#fff'
      }
    }
  }
);

这是我的家

import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Camera from './Camera'
export default class Home extends React.Component{

    static navigationOptions = {
        title: "PhotoClicker"
    }

    render(){

        let photo = this.props.navigation.getParam("Photo", "empty")
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Image
                    resizeMode="center"
                    style = {styles.imageHolder}
                    source={
                        photo === "empty" ? require("../assets/viking.png") : photo
                    }
                />
                <Button
                title="Take Photo"
                style={styles.button}
                onPress={()=>{
                    this.props.navigation.navigate(Camera)
                }}
                />
            </View>
        );
    }

}

这是相机：

import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';

export default class Camera extends React.Component{

    render(){
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text>Camera Screen</Text>
            </View>
        );
    }

}

它应该只是一个从家到相机的按钮，但我得到的只是上述错误。我试图更改导入，但是我一直收到相同的错误。我的安装程序可能出问题了，我觉得与Android上的Java相比，我收到的错误更多与React-native不直接相关的代码。

Answer 1

因为您要将“摄像机屏幕”添加到createStackNavigator。您可以直接通过导航道具导航到该屏幕。因此，请从主屏幕中删除以下不必要的导入代码

import Camera from './Camera'

更改导航操作

this.props.navigation.navigate('Camera')

Answer 2

尝试一下，请参考QA

this.props.navigation.navigate("Camera")

反应错误“路线“摄像机”的组件必须是反应组件”是什么意思？

2 个答案: