представление вкладки ReactNative проблема

У меня возникла следующая проблема. Я добавил свой код и снимок экрана. Может ли кто-нибудь помочь мне решить эту проблему:

Инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга SceneView.

Код:

Я добавил снимок и код. Пожалуйста, помогите мне решить эту проблему.

Проблема в том, что контекст Компонента недоступен в SceneView. Поскольку вы вызываете

import React, {Component} from 'react';
import {View, StyleSheet, SafeAreaView, Text, Button} from 'react-native';
import {
  TabViewAnimated,
  TabView,
  TabViewPage,
  TabBarTop,
} from 'react-native-tab-view';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        {key: '1', title: 'First'},
        {key: '2', title: 'Second'},
      ],
    };
  }

  _renderScene = ({route}) => {
    switch (route.key) {
      case '1':
        return <View style={{flex: 1, backgroundColor: '#ff4081'}} />;
      case '2':
        return <View style={{flex: 1, backgroundColor: '#673ab7'}} />;
      default:
        return null;
    }
  };

  _renderPage = props => (
    <TabViewPage {...props} renderScene={this._renderScene} />
  );

  render() {
    return (
      <View>
        <TabView
          navigationState={this.state}
          renderScene={this._renderPage}
          renderHeader={this._renderHeader}
          onIndexChange={index => this.setState({index})}
          style={styles.container}
        />
      </View>
    );
  }
}

import React, {Component} from 'react';
import {View, StyleSheet, SafeAreaView, Text, Button} from 'react-native';
import {
  TabViewAnimated,
  TabView,
  TabViewPage,
  TabBarTop,
} from 'react-native-tab-view';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        {key: '1', title: 'First'},
        {key: '2', title: 'Second'},
      ],
    };
  }

  _renderScene = ({route}) => {
    switch (route.key) {
      case '1':
        return <View style={{flex: 1, backgroundColor: '#ff4081'}} />;
      case '2':
        return <View style={{flex: 1, backgroundColor: '#673ab7'}} />;
      default:
        return null;
    }
  };

  _renderPage = props => (
    <TabViewPage {...props} renderScene={this._renderScene} />
  );

  render() {
    return (
      <View>
        <TabView
          navigationState={this.state}
          renderScene={this._renderPage}
          renderHeader={this._renderHeader}
          onIndexChange={index => this.setState({index})}
          style={styles.container}
        />
      </View>
    );
  }
}

Вы можете сделать это с помощью привязок (от _3_ к _4_) или указать анонимную функцию (_5_).