Question

在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);
}

Answer 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>

Answer 2

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

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

应该有用。

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

2 个答案: