Javascript 如何使用反应本机选项卡视图显示动态选项卡?
我一直试图用Javascript 如何使用反应本机选项卡视图显示动态选项卡?,javascript,reactjs,react-native,react-native-tab-view,Javascript,Reactjs,React Native,React Native Tab View,我一直试图用react native tab view显示动态选项卡,但它总是给我这个错误: 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 fro
react native tab view
显示动态选项卡,但它总是给我这个错误:
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)
我的代码是:
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',
},
});
import*as React from'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',
},
});
对于动态选项卡,仅在满足以下条件后设置路由值:
例如:我必须根据api响应中的数据可用性设置“审阅”、“库”选项卡:
例如:
this.state={
索引:0,
路线:[]
}
------------------
{
this.setState({index});
}}
SwipEnabled={false}
/>
-------------------------
setRoutes(){
设tabArray=[];
如果(……条件……){
tabArray.push({key:“Gallery”,title:“Gallery”,导航:this.props.navigation})
}
如果(……条件……){
push({key:“Review”,title:“Review”,导航:this.props.navigation})
}
//在这里设置路线
这是我的国家({
路由:tabArray
});
}
就这样 哪里是
SceneComponent
?这不使用导航。但是错误清楚地表明它在SceneComponent
中。啊,那是在react native tab view
库的SceneMap组件中。@khateeb找到解决方案了吗?我也有同样的问题。
this.state = {
index: 0,
routes: []
}
------------------
<TabView
navigationState={this.state}
renderScene={this.renderScene}
renderTabBar={this.renderTabBar}
onIndexChange={index => {
this.setState({ index });
}}
swipeEnabled={false}
/>
-------------------------
setRoutes() {
let tabArray=[];
if(......condition...){
tabArray.push({key:"Gallery",title:"Gallery",navigation: this.props.navigation})
}
if(......condition...){
tabArray.push({key:"Review",title:"Review",navigation: this.props.navigation})
}
//set route here
this.setState({
routes: tabArray
});
}