как изменить цвет фона активного нижнего колонтитула в nativebase - PullRequest
Новая
       52

как изменить цвет фона активного нижнего колонтитула в nativebase

0 голосов
/ 07 апреля 2020

Я хочу изменить цвет фона активной вкладки нижнего колонтитула в основной базе. Я не нашел ничего на этом официальном сайте c. Пожалуйста, наведите меня на это. Спасибо 

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

1 Ответ

0 голосов
/ 07 апреля 2020

Внутри панели вкладок вы можете использовать свой компонент, и для изменения его цвета вам нужно передать активным реквизитам по умолчанию активный цвет синий ... и чтобы изменить его, просто добавьте цвет к компоненту внутри вкладки fotter Рабочий пример: https://snack.expo.io/@msbot01 / authenti c -чипы 

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({




});
...