Javascript 在react native选项卡视图中创建路由时获取不变冲突 当前行为

使用

react native tab view

v1.0.0时，出现错误：

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SceneComponent`.

This error is located at:
    in SceneComponent (at SceneMap.js:16)
    in RCTView (at View.js:43)
    in AndroidViewPager (at ViewPagerAndroid.android.js:247)
    in ViewPagerAndroid (at PagerAndroid.js:154)
    in PagerAndroid (at TabView.js:59)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in TabView (at UnderlineTabbar.js:76)

预期行为 不应抛出错误并运行

代码示例如下所示

/*@flow*/
从“React”导入*作为React；
从“react native”导入{样式表、维度、视图}；
进口{
TabView，
塔巴，
场景地图，
类型路线，
键入NavigationState，
}从“反应本机选项卡视图”；
从“反应本机线性渐变”导入LinearGradient；
从“/CategoryPage”导入CategoryPage；
从“反应本机滑动手势”导入手势识别器，{SwipDirections}；
从“../../components/ButtonWithIcon”导入ButtonWithIcon；
类型状态=导航状态<
路线
>;
常量初始布局={
高度:0,，
宽度：尺寸。获取（'窗口'）。宽度，
};
导出默认类UnderlineTabbar扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
索引：0，
路线：[]，
场景：{}
};
props.categories.forEach（类别=>{
this.state.routes.push（{key:category.description，title:category.name}）；
});
让场景={}；
props.categories.forEach（类别=>{
如果（category.assets.length>0）{
const FirstRoute=（）=>(
);
场景[category.description]=FirstRoute；
}
});
this.state.scenes=场景；
}
_handleIndexChange=索引=>
这是我的国家({
指数
});
_renderTabBar=道具=>(
);
render（）{
常量配置={
velocityThreshold:0.1，
方向偏移阈值：800
};
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
选项卡栏：{
背景颜色：“#3f51b5”，
},
选项卡：{
宽度：120，
},
指标：{
背景颜色：“#ffeb3b”，
},
标签：{
颜色：“#fff”，
fontWeight:'400'，
},
});

您的代码示例不完整，因此很难说，但错误表明您可能错误地导入了

选项卡视图

或

视图

组件（可能是指默认导出而不是命名导出，反之亦然）。如果您能提供该文件的完整代码示例（不要切断导入），我将用更有用的内容更新此答案。

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

@khateeb我想知道TabView是否需要

this.state.routes

和

this.state.scenes

进行匹配。或者至少有一条路线不是空的。您是否尝试过一个非常基本的设置，其中有一个路径和场景映射，看起来像文档中的示例？我尝试了一个基本示例。当路由是静态定义的，而不是动态定义的时，它可以工作。请尝试将场景分配给类变量并在中使用它，好吗SceneMap@AshwinMothilal我试过了。没用。

/* @flow */    
import * as React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import {
  TabView,
  TabBar,
  SceneMap,
  type Route,
  type NavigationState,
} from 'react-native-tab-view';
import LinearGradient from 'react-native-linear-gradient';
import CategoryPage from './CategoryPage';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import ButtonWithIcon from '../../components/ButtonWithIcon';

type State = NavigationState<
  Route<{
    key: string,
    title: string,
  }>
>;

const initialLayout = {
  height: 0,
  width: Dimensions.get('window').width,
};

export default class UnderlineTabbar extends React.Component<*, State> {

  constructor(props) {
      super(props);

      this.state = {
        index: 0,
        routes: [],
        scenes: {}
      };
      props.categories.forEach(category => {
        this.state.routes.push({ key: category.description, title: category.name });
      });
      let scenes = {};
      props.categories.forEach(category => {
        if(category.assets.length > 0) {
          const FirstRoute = () => (
            <View style={[styles.container, { backgroundColor: '#ff4081' }]} />
          );
          scenes[category.description] = FirstRoute;
        }
      });
      this.state.scenes = scenes;
  }

  _handleIndexChange = index =>
    this.setState({
      index,
    });

  _renderTabBar = props => (
    <TabBar
      {...props}
      scrollEnabled
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      tabStyle={styles.tab}
      labelStyle={styles.label}
    />
  );

  render() {
    const config = {
      velocityThreshold: 0.1,
      directionalOffsetThreshold: 800
    };
    return (
      <TabView
        style={[styles.container, this.props.style]}
        navigationState={this.state}
        renderScene={SceneMap(this.state.scenes)}
        renderTabBar={this._renderTabBar}
        onIndexChange={this._handleIndexChange}
        initialLayout={initialLayout}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabbar: {
    backgroundColor: '#3f51b5',
  },
  tab: {
    width: 120,
  },
  indicator: {
    backgroundColor: '#ffeb3b',
  },
  label: {
    color: '#fff',
    fontWeight: '400',
  },
});