在react-native中如何获取选项卡值或索引

问题描述 投票:0回答:2

在react-native中如何获取选项卡值或索引。我在选项卡中呈现API数据。在我们的标签中,有多个日期即将到

我想保存选定的选项卡值,例如选择了哪个日期。

有人可以帮忙吗?

 <Tabs renderTabBar={() => <ScrollableTab />} style={styles.Card_background_Margin} initialPage={0}
                      onChangeTab={(Tab, index) => this.tabChanged(Tab, index)}>


                      {  this.state.dateList.map((lists) => {
                        return(
                      <Tab heading= {lists.items} style={styles.Tab_background}>
                        <ScheduleDays navigation={this.props.navigation} />
                      </Tab>

                      )
                  })
                }

                </Tabs>

在这里,我正在调用该函数,但是在一个警报中,它即将到来的[object][object],而对于索引,它即将到来的undefined。如果我选择任何其他选项卡,则此功能正常。

tabChanged(Tab, index){
  alert(Tab);
}
reactjs react-native
2个回答
1
投票

我已经解决了这个问题......

您必须在构造函数中定义initialPage,如下所示:

constructor(props) {
        super(props);
           this.state = {
          pageNumber: 1
    }

之后在这里打电话给你方法,你会得到选择的标题值,警告我工作正常。

tabChanged(ref){
   alert(ref);
   }

<Tabs
   renderTabBar={() => <ScrollableTab />} style={styles.Card_background_Margin}
   initialPage={this.state.pageNumber}
   onChangeTab={({ ref }) => this.tabChanged(ref.props.heading)}
>
   {
      this.state.dateList.map((lists) => {
         return(
            <Tab heading= {lists.items}  style={styles.Tab_background}>
               <ScheduleDays navigation={this.props.navigation} />
            </Tab>
         )
      }) 
   }  
</Tabs>

0
投票

我遇到了同样的问题,因为索引会返回一个对象。但是该对象由三个属性(i,ref,from)组成,因此使用i.i可以获得选项卡的索引。所以在你的例子中

tabChanged(Tab, index){ alert(Tab.i); }

应该管用。

© www.soinside.com 2019 - 2024. All rights reserved.