React native 路由的组件必须是React组件

我正在尝试用React native和Expo制作一个应用程序。我正在尝试从我的Profiel.js导航到ChoosePhoto.js。当我在我的android emulator上打开应用程序时，我得到了一个错误“route 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 />
  );
};

从“React”导入React；
从“react native”导入{Text，View，StyleSheet，}；
从“./navigation/ProfielNavigator”导入ProfielNavigator；
导出默认函数App（）{
返回(
);
};

我的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'
    }
  });

从“React”导入React；
从“react native”导入{Text，View，StyleSheet，Button，Fragement}；
导出类GebruikerScherm扩展了React.Component{
组件willmount（）{
这是getData（）；
}
构造函数（）{
超级（）；
此.state={
格布里基里德：2，
当前人员：{}，
}
}
getData=（）=>{
返回fetch（“（我的ip地址）/gebruiker/id？gebruikerId=”+this.state.gebruikerId{
方法：“GET”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
this.setState（{currentPerson:responseJson}）；
console.log（this.state.currentPerson）；
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
返回(
Gebruiker:{this.state.currentPerson.gebruikerID}
Gebruiker:{this.state.currentPerson.gebruikernam}
Gebruiker:{this.state.currentPerson.biografie}
);
};
};
导出常量ProfielScreen=props=>{
返回(
{
props.navigation.navigate({
routeName:“照片”
});
}} />
);
};
const styles=StyleSheet.create({
容器：{
玛金托普：200，
宽度：“100%”，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”
}
});

选择sephoto.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;

从“React”导入React；
从“react native”导入{Text，View，StyleSheet，}；
const choosphotoScreen=props=>{
返回(
{
props.navigation.navigate({
routeName:“照片”
});
}} />
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
导出默认选择照片屏幕；

---

我希望我的profiel.js页面有一个按钮。使用onpress操作，我想从profiel.js转到choosephoto.js，但页面甚至不会加载。

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

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

---

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

导入对象的方式错误

您试图使用的对象仅为

导出

。而不是

导出默认值

你的profile.js

export const profilescreen=props=>{
返回(
{
props.navigation.navigate({
routeName:“照片”
});
}} />
);
};

您选择的照片.js

。。。
导出默认选择照片屏幕；

用法

从“../screens/Profiel”导入{ProfielScreen}；
从“../screens/ChoosePhoto”导入ChoosePhotoScreen作为PhotoScreen；
...
const ProfielNavigator=createStackNavigator({
ProfielS:ProfielScreen，
照片：光幕
});

示例

从“React”导入React

这实际上是说“从react模块中找到默认导出，并将其作为常量导入，我想调用

react

”

从'React'导入{React}

这表示“从react模块中找到显式命名为react的导出，并在此处将其作为常量导入，我想调用

react

”