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

Question

我正在使用 native-base 创建一个选项卡式屏幕，该屏幕有一个 header、选项卡和选项卡内容。我创建了一个状态来存储哪些选项卡处于活动状态，但我不知道如何更新该状态的值。我试过使用 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

这是我想要达到的效果（改变header和标签的背景颜色）：

TAB 1

TAB 2

Answer 1

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


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

并在 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>

Answer 2

你不应该直接修改你的状态，而是使用 setState()

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

您可以修改此代码以实现您想要的效果：

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

export default class TabsExample extends Component {
  state = {
    backgroundColor: ''
  }

  render() {
    return (
      <Container>
        <Tabs 
          onChangeTab={({i}) => {
              if(i === 0) this.setState({backgroundColor: 'red'})
              else if(i === 1) this.setState({backgroundColor: 'brown'})
              else if(i === 2) this.setState({backgroundColor: 'pink'})
            }
          }
        >
          <Tab 
            heading="Tab1" 
            tabStyle={{backgroundColor: this.state.backgroundColor}}
            activeTabStyle={{backgroundColor: this.state.backgroundColor}}
          >
            <Text>Tab 1</Text>
          </Tab>
          <Tab 
            heading="Tab2"
            tabStyle={{backgroundColor: this.state.backgroundColor}}
            activeTabStyle={{backgroundColor: this.state.backgroundColor}}
          >
            <Text>Tab 2</Text>
          </Tab>
          <Tab 
            heading="Tab3"
            tabStyle={{backgroundColor: this.state.backgroundColor}}
            activeTabStyle={{backgroundColor: this.state.backgroundColor}}
          >
            <Text>Tab 3</Text>
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

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

How to change state value when the tab is changed (Native base)

reactjs

react-native

native-base