React native 无法在ScrollableTabView中呈现视图

我是React Native的新手，我正在尝试使用这个包使用选项卡，选项卡就是这样创建的

<ScrollableTabView

   renderTabBar={() => (
       <ScrollableTabBar
       style={styles.scrollStyle}
            tabStyle={styles.tabStyle}
          />
        )}
        tabBarTextStyle={styles.tabBarTextStyle}
        tabBarInactiveTextColor={'black'}
        tabBarActiveTextColor={'red'}
        tabBarUnderlineStyle={styles.underlineStyle}
        initialPage={2}
      >

        <View key={'1'} tabLabel={'firt tab '} style={{flex:1,backgroundColor:'red'}}/>
        <View key={'2'} tabLabel={'second tab'} style={{flex:1,backgroundColor:'blue'}}/>
        <View key={'3'} tabLabel={'third tab'} style={{flex:1,backgroundColor:'yellow'}}/>
</ScrollableTabView>

(
)}
tabBarTextStyle={styles.tabBarTextStyle}
tabBarInactiveTextColor={'black'}
tabbarActivatextColor={'red'}
tabBarUnderlineStyle={styles.underlineStyle}
initialPage={2}
>

而且很好用

但当我试图渲染视图以在我失败的每个选项卡中显示它时，我尝试了这种方法

<View key={'1'} tabLabel={'firt tab '} style={{flex:1,backgroundColor:'red',height:100}}>
    <View><Text>first</Text></View>
</View>

第一

但它给出了错误“TypeError:JSON.stringify无法序列化循环结构”，我不知道这是什么意思，如果有人已经使用过这个包或者知道解决方案，请帮助

这是我的全部密码

import React from 'react';
import { ScrollView, ImageBackground, Image, View, StyleSheet, 
StatusBar, Dimensions, Platform } from 'react-native';
import { Block, Button, Text, theme } from 'galio-framework';
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view-forked';

const { height, width } = Dimensions.get('screen');
import { Images, argonTheme } from '../constants/';
import { HeaderHeight } from "../constants/utils";
import ajax from '../services/FetchSubjects';
import Loader from '../components/Loader';

const URI = 'http://localhost:8000';

export default class SubjectDetails extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
     loading: true,
     data: {
      subject: {},
      meals: []
    }
  }
 }  
 async componentDidMount() {
  const data = await ajax.fetchSubjectDetails(this.props.navigation.state.params.subjectId);
this.setState({
  data: {
    subject: data.subject,
    meals: data.meals
  },
  loading: false
 });
}

render() {
  const { navigation } = this.props;

  return (
   <Block safe style={styles.container}>
    <Block>
      <StatusBar barStyle="light-content" />
      <Loader loading={this.state.loading} />
      <Block flex style={styles.category}>
        <ImageBackground
          source={this.state.loading ? Images.Pro : { uri: URI + this.state.data.subject.cover.url }}
          style={{ flex: 1, height: 160, width, zIndex: 1 }}
        >
        <Block style={styles.categoryBg}>
          <Block style={styles.categoryTitle}>
            <Text size={18} bold color={theme.COLORS.WHITE}>
              {this.state.data.subject.name}
            </Text>
          </Block>
        </Block>
        </ImageBackground>
      </Block>
    </Block>
    <Block style={{marginTop:160,height:"100%"}}>
      <ScrollView>
        <ScrollableTabView

            renderTabBar={() => (
              <ScrollableTabBar
                style={styles.scrollStyle}
                tabStyle={styles.tabStyle}
              />
            )}
            tabBarTextStyle={styles.tabBarTextStyle}
            tabBarInactiveTextColor={'black'}
            tabBarActiveTextColor={'#2B4D8E'}
            tabBarUnderlineStyle={styles.underlineStyle}
            initialPage={2}
          >

          <View key={'1'} tabLabel={'firt tab '} style={{flex:1,backgroundColor:'red',height:100}}><Text>Lorem ipsum</Text></View>
          <View key={'2'} tabLabel={'second tab'} style={{flex:1,backgroundColor:'blue',height:100}}/>
          <View key={'3'} tabLabel={'third tab'} style={{flex:1,backgroundColor:'yellow',height:100}}/>
          <View key={'4'} tabLabel={'Fourth tab'} style={{flex:1,backgroundColor:'yellow',height:100}}/>
        </ScrollableTabView>
      </ScrollView>
    </Block>
  </Block>
  );
 }
}

从“React”导入React；
导入{ScrollView，ImageBackground，Image，View，StyleSheet，
“react native”中的状态栏、维度、平台}；
从“galio框架”导入{块、按钮、文本、主题}；
从“react native scrollable tab view forked”导入ScrollableTabView，{DefaultTabBar，ScrollableTabBar}；
const{height，width}=Dimensions.get（'screen'）；
从“../constants/”导入{Images，argonTheme}；
从“./constants/utils”导入{HeaderHeight}；
从“../services/FetchSubjects”导入ajax；
从“../components/Loader”导入加载程序；
常量URI=http://localhost:8000';
导出默认类SubjectDetails扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
数据：{
主题：{}，
膳食：[]
}
}
}  
异步组件didmount（）{
const data=await ajax.fetchSubjectDetails（this.props.navigation.state.params.subjectId）；
这是我的国家({
数据：{
主题：data.subject，
膳食：数据。膳食
},
加载：错误
});
}
render（）{
const{navigation}=this.props；
返回(
{this.state.data.subject.name}
(
)}
tabBarTextStyle={styles.tabBarTextStyle}
tabBarInactiveTextColor={'black'}
tabbarActivatextColor={'#2B4D8E'}
tabBarUnderlineStyle={styles.underlineStyle}
initialPage={2}
>
乱数假文
);
}
}

好的，我阅读了分叉的

react native scroll tab视图

和

react native scroll tab视图

源代码，发现一些代码不同，这导致了您的问题。您应该使用

react native scroll tab view

原因是: 首先，我们看一下源代码，位于index.js中的ScrollTabview，我只展示了核心代码

// this is react-native-scroll-tab-view code
let tabBarProps = {
      goToPage: this.goToPage,
      tabs: this._children().map((child) => child.props.tabLabel), //this is the diffent
      activeTab: this.state.currentPage,
      scrollValue: this.state.scrollValue,
      containerWidth: this.state.containerWidth,
    };
// this is the fork project
const tabBarProps = {
      goToPage: this.goToPage,
      tabs: this._children().map(child => child.props), //this is the diffent
      activeTab: this.state.currentPage,
      scrollValue: this.state.scrollValue,
      // containerWidth: this.props.containerWidth,
      containerWidth: this.props.tabsWidth || this.props.containerWidth,
      initialPage:this.props.initialPage,
    }
// the tabs in the fored is not according by tablabel.

// then it will call the this.renderTabBar method
return <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
      {this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
      {this.renderScrollableContent()}
      {(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
    </View>;

//in this.renderTabBar, you define the method, so it will call this.props.renderTabBar
renderTabBar(props) {
    if (this.props.renderTabBar === false) {
      return null;
    } else if (this.props.renderTabBar) {
      return React.cloneElement(this.props.renderTabBar(props), props);
    } else {
      return <DefaultTabBar {...props} />;
    }
  },

 // then, we look at the ScrollTabBar soruce code, which will render tabs
 //here it call the JSON.stringfy, so here it is your errors occur
componentDidUpdate(prevProps) {
    // If the tabs change, force the width of the tabs container to be recalculated
    if (JSON.stringify(prevProps.tabs) !== JSON.stringify(this.props.tabs) && this.state._containerWidth) {
      this.setState({ _containerWidth: null, });
    }
  },

//这是本机滚动选项卡视图代码
设tabBarProps={
戈托帕奇：这个，戈托帕奇，
tabs:this._children（）.map（（child）=>child.props.tabLabel），//这是不同的
activeTab:this.state.currentPage，
scrollValue:this.state.scrollValue，
containerWidth:this.state.containerWidth，
};
//这是fork项目
常数tabBarProps={
戈托帕奇：这个，戈托帕奇，
tabs:this.\u children（）.map（child=>child.props），//这是不同的
activeTab:this.state.currentPage，
scrollValue:this.state.scrollValue，
//containerWidth:this.props.containerWidth，
containerWidth:this.props.tabsWidth | | this.props.containerWidth，
initialPage:this.props.initialPage，
}
//fored中的选项卡与Tablebel不一致。
//然后它将调用this.renderTabBar方法
返回
{this.props.tabBarPosition=='top'&&this.renderTabBar（tabBarProps）}
{this.renderScrollableContent（）}
{（this.props.tabBarPosition=='bottom'| | overlayTabs）&&this.renderTabBar（tabBarProps）}
;
//在this.renderTabBar中，您定义了方法，因此它将调用this.props.renderTabBar
renderTabBar（道具）{
if（this.props.renderTabBar===false）{
返回null；
}else if（this.props.renderTabBar）{
返回React.cloneElement（this.props.renderTabBar（props），props）；
}否则{
返回；
}
},
//然后，我们看一下ScrollTabBar soruce代码，它将呈现选项卡
//这里它调用JSON.stringfy，因此这里是您的错误发生的地方
componentDidUpdate（prevProps）{
//如果选项卡更改，则强制重新计算选项卡容器的宽度
if（JSON.stringify（prevProps.tabs）！==JSON.stringify（this.props.tabs）&this.state.\u containerWidth）{
this.setState（{u containerWidth:null，}）；
}
},

---

我希望它能帮助你

我在我的演示中使用了你的代码，效果很好，所以这可能不是库的问题，你能提供更多细节吗？你提供的链接中也提供了自定义视图，请使用它@Lenoarod我已经更新了我的代码，请看一看，看一下这个视图：key{1}，它给出了错误