当前行为
使用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 */
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',
},
});