Я практикуюсь в snack.expo.io и получаю следующее: «Устройство: (986: 2890) Компонент для маршрута« componentOne »должен быть компонентом React».

Question

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

const AppNavigator = createSwitchNavigator({
  componentOne: ScreenOne,
  componentTwo: ScreenTwo
});

class ScreenOne extends Component {
  render() {
    return (
      <View style={styles.componentOne}>
        <Button
          title="goto two"
          onPress={this.prop.navigation.navigate('componentTwo')}
        />
      </View>
    );
  }
}

class ScreenTwo extends Component {
  render() {
    return (
      <View style={styles.componentTwo}>
        <Button
          title="goto one"
          onPress={this.prop.navigation.navigate('componentOne')}
        />
      </View>
    );
  }
}

export default class App extends Component {
  render() {
    return (
        <AppNavigator />
    );
  }
}

const styles = StyleSheet.create({
  componentOne: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    border: 10,
    borderColor: 'teal',
  },

  componentTwo: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    border: 10,
    borderColor: 'orange',
  },
})

Приведенный выше код содержит два экрана (React Component) ScreenOne и ScreenTwo и приложение для встраивания AppNavigator. У меня постоянно возникает эта проблема: Устройство: (986: 2890) Компонент для маршрута 'componentOne' должен быть компонентом React .

Так как на практике я делаю все это в одном файле.