如何更改选项卡时更改状态值（以本机为基础）

Question

我正在使用基于本机的页面来创建选项卡式屏幕，该屏幕具有标题，选项卡和选项卡内容。我创建了一个状态来存储哪个选项卡处于活动状态，但是我不知道如何更新该状态的值。我已经尝试过使用onScroll和onChangeTab方法，但是它并没有按照我的意愿工作。我需要您的帮助来解决这个问题。这是源代码：

import React, { Component } from 'react';
import { Text } from 'react-native'
import { Tabs, Tab, TabHeading } from 'native-base'

import Container from '../../components/TransactionRegistration/TransactionRegistrationContainer'
import Expenses from '../../components/TransactionRegistration/Expenses'
import Incomes from '../../components/TransactionRegistration/Incomes'

import styles from '../../assets/css/styles'

class TransactionRegistration extends Component{
    state = {
        tab: 'incomes'
    }

    handleTabChange = () => {
        this.state.tab += 1
        if (this.state.tab == 'expenses') {
            this.state.tab = 'incomes'
        } else {
            this.state.tab = 'expenses'
        }
    }


    render(){
        return(
            <Container>
                <Tabs>
                    <Tab heading={<TabHeading style={this.state.tabT == 'incomes' ? styles.tabHeadingIncomes : styles.tabHeadingExpenses} ><Text>Receitas</Text></TabHeading>}>
                        <Incomes />
                    </Tab>
                    <Tab heading={<TabHeading style={this.state.tabT == 'incomes' ? styles.tabHeadingIncomes : styles.tabHeadingExpenses} ><Text>Despesas</Text></TabHeading>}>
                        <Expenses />
                    </Tab>
                    {/* <Tab heading={<TabHeading style={styles.tabHeading} ><Text>Investimentos</Text></TabHeading>}>
                        <Investiments />
                    </Tab> */}
                </Tabs>
            </Container>
        )
    }
}

export default TransactionRegistration

这是我想要实现的效果（更改标题和选项卡的背景颜色：]

TAB 1

TAB 2

Answer 1

您可以轻松地在此函数上添加参数

handleTabChange = (tab) => {
     // and then save this type to state
   this.setState({tab})
   }

并添加onPress在选项卡上

 <Tabs>
          <Tab
          onPress={()=>this.handleTabChange('incomes')}
            heading={
              <TabHeading
                style={
                  this.state.tabT == 'incomes'
                    ? styles.tabHeadingIncomes
                    : styles.tabHeadingExpenses
                }>
                <Text>Receitas</Text>
              </TabHeading>
            }>
            <Incomes />
          </Tab>
          <Tab
               onPress={()=>this.handleTabChange('expenses')}
            heading={
              <TabHeading
                style={
                  this.state.tabT == 'incomes'
                    ? styles.tabHeadingIncomes
                    : styles.tabHeadingExpenses
                }>
                <Text>Despesas</Text>
              </TabHeading>
            }>
            <Expenses />
          </Tab>