вкладка вид ReactNative проблема - PullRequest
Новая
       19

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

0 голосов
/ 06 февраля 2020

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

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

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

Эта ошибка обнаружена в: в RCTView (на SceneView.tsx: 92) в SceneView (в TabView.tsx: 181) в RCTView (в createAnimatedComponent. js: 233) в AnimatedComponent (Компонент) (в Pager.tsx: 780) в PanGestureHandler (в Pager.tsx: 769) в пейджере (в TabView.tsx: 75) в RCTView (на TabView.tsx: 133) в TabView (при тестировании. js: 47) в RCTView (при тестировании. js: 46) в тесте (в SceneView. js: 9) в SceneView (в StackView.tsx: 269) в RCTView (на CardContainer.tsx: 171) в RCTView (на CardContainer.tsx: 170) в RCTView (на Card.tsx: 488) в RCTView (в createAnimatedComponent. js: 151) в AnimatedComponent (в Card.tsx: 475) в PanGestureHandler (в Card.tsx: 468) в RCTView (в createAnimatedComponent. js: 151) в AnimatedComponent (в Card.tsx: 464) в RCTView (на Card.tsx: 457) в карточке (на CardContainer.tsx: 138) в CardContainer (на CardStack.tsx: 544) в RCTView (в createAnimatedComponent. js: 151) в AnimatedComponent (в CardStack.tsx: 121) в MaybeScreen (на CardStack.tsx: 537) в RCTView (на CardStack.tsx: 96) в MaybeScreenContainer (на CardStack.tsx: 444) в CardStack (в StackView.tsx: 377) в KeyboardManager (в StackView.tsx: 375) в SafeAreaProviderCompat (в StackView.tsx: 372) в StackView (в StackView.tsx: 41) в StackView (в createStackNavigator.tsx: 33) в Неизвестно (при createNavigator. js: 80) в навигаторе (в SceneView. js: 9) в SceneView (в StackView.tsx: 269) в RCTView (на CardContainer.tsx: 171) в RCTView (на CardContainer.tsx: 170) в RCTView (на Card.tsx: 488) в RCTView (в createAnimatedComponent. js: 151) в анимированном компоненте (на Card.tsx: 475) в PanGestureHandler (на Card.tsx: 468) в RCTView (в createAnimatedComponent. js: 151) в AnimatedComponent (в Card.tsx: 464) в RCTView (на Card.tsx: 457) в карточке (на CardContainer.tsx: 138) в CardContainer (на CardStack.tsx: 544) в RCTView (в createAnimatedComponent. js: 151) в AnimatedComponent (в CardStack.tsx: 121) в MaybeScreen (на CardStack.tsx: 537) в RCTView (на CardStack.tsx: 96) в MaybeScreenContainer (на CardStack.tsx: 444) в CardStack (в StackView.tsx: 377) в KeyboardManager (в StackView.tsx: 375) в RNCSafeAreaView (в src / index.tsx: 26) в SafeAreaProvider (в SafeAreaProviderCompat.tsx: 34) в SafeAreaProviderCompat (в StackView.tsx: 372) в StackView (в StackView.tsx: 41) в StackView (в createStackNavigator.tsx: 33) в Неизвестно (при createNavigator. js: 80) в навигаторе (в createAppContainer. js: 430) в NavigationContainer (в приложении js: 20) в приложении (на renderApplication. js: 40) в RCTView (в AppContainer. js: 101) в RCTView (в AppContainer. js: 119) в AppContainer (при renderApplication. js: 39)

индекс. bundle? platform = ios & dev = true & minify = false: 27606: 43 createFiberFromTypeAndProps index.bundle? platform = ios & dev = true & minify = false: 27608: 19 createFiberFromElement index.bundle? platform = ios & dev = true & minify = false: 27628: 48 reconcileSingleElement index.bundle? platform = ios & dev = true & minify = false: 19154: 51 reconcileChildFibers index.bundle? platform = ios & dev = true & minify = false: 19201: 63 reconcileChildren index.bundle? platform = ios & dev = true & minify = false: 21139: 50 updateHostComponent index.bundle? platform = ios & dev = true & minify = false: 21533: 26 invokeGuardedCallbackImpl index.bundle? platform = ios & dev = true & minify = false: 12669: 21 invokeGuardedCallback index.bundle? platform = ios & dev = true & minify = false: 12765: 42 beginWork $$ 1 index.bundle? platform = ios & dev = true & minify = false: 26886: 34 executeUnitOfWork index.bundle? platform = ios & dev = true & minify = false: 26024: 30 workLoopSync index.bundle? platform = ios & dev = true & minify = false: 26006: 45 renderRoot index.bundle? platform = ios & dev = true & minify = false: 25770: 29 renderRoot [собственный код]: 0 runRootCallback index.bundle? platform = ios & dev = true & minify = false: 25531: 34 runRootCallback [нативный код]: 0 index.bundle? platform = ios & dev = true & minify = false: 16261: 38 unstable_runWithPriority index.bundle? platform = ios & dev = true & minify = false: 42653: 30 flushSyncCallbackQueueImpl index.bundle? platform = ios & dev = true & minify = false: 16256: 28 flushSyncCallbackQueue index.bundle? platform = ios & dev = true & minify = false: 16245: 35 scheduleUpdateOnFiber index.bundle? platform = ios & dev = true & minify = false: 25413: 37 scheduleRootUpdate index.bundle? platform = ios & dev = true & minify = false: 27838: 21 scheduleRoot ? Index.bundle платформы = ИОС & Dev = истина и преуменьшать = ложь: 16809: 42 index.bundle? platform = ios & dev = true & minify = false: 41056: 35 forEach [собственный код]: 0 executeReactRefresh index.bundle? platform = ios & dev = true & minify = false: 41048: 30 executeReactRefresh ? Index.bundle платформы = ИОС & Dev = истина и преуменьшать = ложь: 40854: 48 index.bundle? platform = ios & dev = true & minify = false: 480: 40 _callTimer index.bundle? platform = ios & dev = true & minify = false: 30628: 17 callTimers index.bundle? platform = ios & dev = true & minify = false: 30835: 19 __callFunction ? Index.bundle платформы = ИОС & Dev = истина и преуменьшать = ложь: 2681: 49 index.bundle? platform = ios & dev = true & minify = false: 2394: 31 __guard index.bundle? platform = ios & dev = true & minify = false: 2635: 15 callFunctionReturnFlushedQueue index.bundle? platform = ios & dev = true & minify = false: 2393: 21 callFunctionReturnFlushedQueue [собственный код]: 0

enter image description here Код: 

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>
    );
  }
}

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

1 Ответ

0 голосов
/ 06 февраля 2020

Проблема в том, что контекст компонента недоступен в _renderPage(). Поскольку вы вызываете this._renderScene в renderPage, он должен знать контекст / this, чтобы найти конкретную c функцию. Всякий раз, когда вы передаете функцию из компонента класса другому компоненту, вам также нужно указать, что она должна наследовать контекст компонента.

Это можно сделать с помощью привязок (renderScene={this._renderPage} до renderScene={this._renderPage.bind(this)}) или указать анонимная функция (renderScene={(data) => this._renderPage(data)}).

...