如何更改 nativebase 中的活动 footertab 背景颜色

Question

我想在本机基础中更改活动页脚选项卡的背景颜色。我没有在官方文档中找到任何内容。请指导我。谢谢

<Footer style={styles.footer}>
    <FooterTab  style={styles.footerTab} >
      <TouchableOpacity

        onPress={() => this.props.navigation.navigate('Mainhome')}>
        <Image
          source={require('../assets/home.png')}
          style={styles.footerIcon}
        />
      </TouchableOpacity>

      <TouchableOpacity

        onPress={() => this.props.navigation.navigate('Search')}>
        <Image
          source={require('../assets/search.png')}
          style={styles.footerIcon}
        />
      </TouchableOpacity>
      <TouchableOpacity
</FooterTab>
<Footer>

Answer 1

在标签栏内，您可以使用您的组件并更改其颜色，您需要默认传递活动道具，活动颜色为蓝色...要更改它，只需向 fotter 标签内的组件添加颜色工作示例：https://snack.expo.io/@msbot01/authentic-chips

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button} from 'native-base';


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      tabStatus1:true,
      tabStatus2:false,
      tabStatus3:false,
      tabStatus4:false,
    }
  }

  componentDidMount(){


  }

  checkTabSelected(tab){
    switch(tab) {
      case 1:
        this.setState({

          tabStatus1:true,
          tabStatus2:false,
          tabStatus3:false,
          tabStatus4:false
        })
        // code block
        break;
      case 2:
        this.setState({

          tabStatus1:false,
          tabStatus2:true,
          tabStatus3:false,
          tabStatus4:false
        })
        // code block
        break;
      case 3:
        // code block
        this.setState({

          tabStatus1:false,
          tabStatus2:false,
          tabStatus3:true,
          tabStatus4:false
        })
        break;
      case 4:
        this.setState({

          tabStatus1:false,
          tabStatus2:false,
          tabStatus3:false,
          tabStatus4:true
        })
        // code block
        break;

    }
  }




  render() {
    return ( 
      <View style={{ flex: 1 }}>
       <Container>
        <Header />
        <Content />
        <Footer>
          <FooterTab>
            <Button  onPress={()=>{this.checkTabSelected(1)}} active={this.state.tabStatus1} style={{backgroundColor: this.state.tabStatus1?'red':null}} >
              <Text>Apps</Text>
            </Button>
            <Button  onPress={()=>{this.checkTabSelected(2)}} active={this.state.tabStatus2}  style={{backgroundColor: this.state.tabStatus2?'red':null}}>
              <Text>Camera</Text>
            </Button>
            <Button onPress={()=>{this.checkTabSelected(3)}} active={this.state.tabStatus3}  style={{backgroundColor: this.state.tabStatus3?'red':null}}>
              <Text>Navigate</Text>
            </Button>
            <Button  onPress={()=>{this.checkTabSelected(4)}} active={this.state.tabStatus4}  style={{backgroundColor: this.state.tabStatus4?'red':null}}>  
              <Text>Contact</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
      </View>
    );
  }
} 

const styles = StyleSheet.create({




});

Answer 2

我提供了关于这个主题的详细信息

"react-native": "0.62.2",

"native-base": "^2.13.12"

"@react-navigation/drawer": "^5.8.2",

"@react-navigation/native": "^5.5.1",

"@react-navigation/stack": "^5.5.1",

=>

如何更改 nativebase 中的活动 footertab 背景颜色

how to change the active footertab background color in nativebase

react-native

react-native-android

footer

react-native-ios

native-base