React Native Router Flux - 期望一个组件类，当单击按钮转到另一个屏幕时得到 [object Object]答案

【问题标题】：React Native Router Flux - expected a component class, got [object Object] when click a button to go to another screenReact Native Router Flux - 期望一个组件类，当单击按钮转到另一个屏幕时得到 [object Object]
【发布时间】：2019-02-23 16:20:12
【问题描述】：

我在使用 react-native-router-flux 时遇到组件类得到对象错误，这是我的 app.js 文件和组件文件。

app.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ScarletScreen from './components/ScarletScreen';
import GrayScreen from './components/GrayScreen';
import {Router, Scene} from 'react-native-router-flux';

const App = () => {

    return (
     <Router>
      <Scene key = "root">

        <Scene
          key = "scarlet"
          component =  {ScarletScreen }
          title = "Scarlet"
          initial
        />


      <Scene
          key = "gray"
          component = { GrayScreen }
          title = "Gray"
        />
      </Scene>

     </Router>
    );
  }

export default App;

ScarletScreen.js

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

import { Actions } from 'react-native-router-flux';

const ScarletScreen = () => {
  return (
    <View
      style={{
        backgroundColor: '#bb0000',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Scarlet Screen</Text>

      <Button title="IR PARA GRAY" onPress={() => Actions.gray()} />
    </View>
  );
};

export default ScarletScreen;

GrayScreen.js

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

import { Actions } from 'react-native-router-flux';

const GrayScreen = () => {
  return(
    <View style={{backgroundColor: '#666666', flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Gray Screen</Text>
    </View>
  );
};

当我点击一个按钮时，会显示错误“元素类型无效：预期为字符串”。

【问题讨论】：

注意 Grayscreen 不导出组件。如果不是这样，请尝试将您的组件导出为命名类并导入为命名组件。在导入命名组件和默认组件时，我遇到了一些关于 RNRF 随机错误的奇怪问题。
对不起@fitzmode 我是新手，我该怎么做？作为命名组件导入？
您修复了丢失的export default GrayScreen 吗？如果那失败了，您需要将 GrayScreen 和 ScarletScreen 更改为命名组件，如 export class GrayScreen extends Component { return( <View style={{backgroundColor: '#666666', flex: 1, alignItems: 'center', justifyContent: 'center'}}> <Text>Gray Screen</Text> </View> ); }
是的，我错过了，顺便谢谢@fitzmode，我需要从 API 接收一个 Json 并在屏幕上显示，你有任何文档或视频教如何做到这一点吗？
看看这个。它有点旧，但这个频道有一些我曾经遵循的非常好的基础知识：youtube.com/watch?v=r-ENJLGrd3s

标签： android ios react-native react-native-router-flux

【解决方案1】：

您需要确保所有组件都已导出。 GrayScreen 缺少导出。

export default Grayscreen

【讨论】：