Question

我正在尝试使用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'
    }
  });

Choosephoto.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，但页面甚至无法加载。

Answer 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常量导入此处。”

Answer 2

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

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

，并再次检查屏幕导入中的所有相关路径。

路由组件必须是一个React组件

2 个答案: