路由组件必须是 React 组件答案

【问题标题】：Component for route must be a React component路由组件必须是 React 组件
【发布时间】：2019-10-28 12:25:36
【问题描述】：

我正在尝试使用 React Native 和 Expo 制作应用程序。我试图从我的 Profiel.js 导航到 ChoosePhoto.js。当我在我的 android 模拟器上打开应用程序时，我收到错误“路由 ProfielS 的组件必须是 React 组件。

导航器

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import ProfielScreen from '../screens/Profiel';
import PhotoScreen from '../screens/ChoosePhoto';

const ProfielNavigator = createStackNavigator ({
    ProfielS: ProfielScreen,
    PhotoS: PhotoScreen

});

export default createAppContainer(ProfielNavigator);

我的 app.js

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

import ProfielNavigator from './navigation/ProfielNavigator';

export default function App() {
  return (
     <ProfielNavigator />
  );
};

我的 profiel.js

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

export class GebruikerScherm extends React.Component {
  componentWillMount() {
    this.getData();
  }
  constructor() {
    super();
    this.state = {
      gebruikerId: 2,
      currentPerson: {},
    }
  }

  getData = () => {
    return fetch('(my ip adress)/gebruiker/id?gebruikerId=' + this.state.gebruikerId, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    })

      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ currentPerson: responseJson });
        console.log(this.state.currentPerson);

      })
      .catch((error) => {
        console.error(error);
      });
  }

  render() {

      return(
        <View style={styles.container}>
        <Text> Gebruiker: {this.state.currentPerson.gebruikerID} </Text>
        <Text> Gebruiker: {this.state.currentPerson.gebruikerNaam} </Text>
        <Text> Gebruiker: {this.state.currentPerson.biografie} </Text>

        </View>

      );
    };

};


 export const ProfielScreen = props =>{
     return(
         <View style={styles.container}>
             <Button title="Profielfoto" onPress={() => {
             props.navigation.navigate({
               routeName: 'PhotoS'
              });
             }} />
         </View>
       );
   };


const styles = StyleSheet.create({
    container: {
      marginTop: 200,
      width: '100%',
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center'
    }
  });

选择photo.js

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

const ChoosePhotoScreen = props =>{
  return(
      <View style={styles.container}>
          <Button title="Profielfoto" onPress={() => {
          props.navigation.navigate({
            routeName: 'PhotoS'
           });
          }} />
      </View>
    );
};

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

export default ChoosePhotoScreen;

我希望我的 profiel.js 页面带有一个按钮。通过 onpress 操作，我想从 profiel.js 转到 choosephoto.js，但页面甚至无法加载。

【问题讨论】：

标签： react-native expo

【解决方案1】：

你拿东西的方式不对。

您尝试使用的对象仅为export。不是export default

你的 profiel.js

    export const ProfielScreen = props =>{
         return(
             <View style={styles.container}>
                 <Button title="Profielfoto" onPress={() => {
                 props.navigation.navigate({
                   routeName: 'PhotoS'
                  });
                 }} />
             </View>
           );
       };

您的 Choosephoto.js

...
export default ChoosePhotoScreen;

用法

import { ProfielScreen }  from '../screens/Profiel';
import ChoosePhotoScreen as PhotoScreen from '../screens/ChoosePhoto';
...
const ProfielNavigator = createStackNavigator ({
    ProfielS: ProfielScreen,
    PhotoS: PhotoScreen

});

示例

import React from 'react'

这实质上是说“从 react 模块中找到默认导出并将其导入为我想调用的常量 React。”

import { React } from 'react'

这表示“从明确命名为 React 的 react 模块中找到导出，并将其作为常量导入此处，我想调用 React。”

【讨论】：

【解决方案2】：

在 profiel.js 中添加默认关键字导出：

export default  class GebruikerScherm extends React.Component {...

并重新检查屏幕导入中的所有相关路径。

【讨论】：