react-native - 如何更改nativebase中的活动页脚标签背景颜色

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>

标签： react-nativereact-native-androidfooterreact-native-iosnative-base

Answer 1

在选项卡栏内，您可以使用您的组件并更改其颜色，您需要默认传递活动道具，活动颜色为蓝色......并且要更改它只需将颜色添加到 fotter 选项卡内的组件工作示例：https://小吃.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({




});