标签视图ReactNative问题

Question

我遇到以下问题，我已经添加了代码和屏幕截图。谁能指导我解决这个问题：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查SceneView的呈现方法。

此错误位于：
在RCTView中（位于SceneView.tsx：92）
在SceneView中（在TabView.tsx：181处）
在RCTView中（位于createAnimatedComponent.js：233处）
在AnimatedComponent（Component）中（在Pager.tsx：780）
在PanGestureHandler中（在Pager.tsx：769处）
在Pager中（在TabView.tsx：75处）
在RCTView中（位于TabView.tsx：133）
在TabView中（在Test.js：47）
在RCTView中（位于Test.js：46）
在Test中（在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上）
在Card中（在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）
in Unknown（在createNavigator.js：80处）
在Navigator中（位于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上）
在Card中（在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）
in Unknown（在createNavigator.js：80处）
在Navigator中（位于createAppContainer.js：430）
在NavigationContainer中（在App.js：20）
在App中（位于renderApplication.js：40）
在RCTView中（位于AppContainer.js：101）
在RCTView中（位于AppContainer.js：119）
在AppContainer中（位于renderApplication.js：39）

index.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 和解孩子
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 performUnitOfWork
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 stable_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？platform = ios＆dev = true＆minify = false：16809：42
index.bundle？platform = ios＆dev = true＆minify = false：41056：35 每次
[本地代码]：0 performReactRefresh
index.bundle？platform = ios＆dev = true＆minify = false：41048：30 performReactRefresh
index.bundle？platform = ios＆dev = true＆minify = false：40854：48
index.bundle？platform = ios＆dev = true＆minify = false：480：40 _callTimer
index.bundle？platform = ios＆dev = true＆minify = false：30628：17 通话计时器
index.bundle？platform = ios＆dev = true＆minify = false：30835：19 __callFunction
index.bundle？platform = ios＆dev = true＆minify = false：2681：49
index.bundle？platform = ios＆dev = true＆minify = false：2394：31 __守卫
index.bundle？platform = ios＆dev = true＆minify = false：2635：15 callFunctionReturnFlushedQueue
index.bundle？platform = ios＆dev = true＆minify = false：2393：21 callFunctionReturnFlushedQueue
[本机代码]：0

代码：

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

我添加了快照和代码。请指导我如何解决。

Answer 1

问题是该组件的上下文在function App() { return <> <Foo<React.InputHTMLAttributes<HTMLInputElement>> elementName="input" value={1} /> {/* valid */} <Foo<React.InputHTMLAttributes<HTMLInputElement>> elementName="input" href='/foo/bar' /> {/* Property 'href' does not exist on type */} </> } 中不可用。当您在renderPage中调用_renderPage()时，它需要知道上下文，才能找到特定的功能。每当将一个函数从您的类组件提供给另一个组件时，您还需要告知它应该继承该组件的上下文。

您可以通过将绑定（this._renderScene绑定到renderScene={this._renderPage}）或指定匿名函数（renderScene={this._renderPage.bind(this)}）来实现此目的。