React Native List and Grid - как добиться активного цвета для значков - PullRequest
Новая
       13

React Native List and Grid - как добиться активного цвета для значков

1 голос
/ 03 июля 2019

Я пытаюсь применить активный цвет для значка, по которому щелкнули (Список и Сетка), но не смог найти правильного решения с тех пор, как перешел в RN. Я вставил код компонента отдельно для справки.

КОД: 

export default class Gallery extends Component {
  state = {
    loading: true,
    gridView: true,
    iconColor: "#ccc"
  };

  changeViewList = () => {
    this.setState({ gridView: false });
  };
  changeViewGrid = () => {
    this.setState({ gridView: true });
  };

  render() {
    const { imageData, loading } = this.state;
    return (
      <View style={{ flex: 1 }}>
          <TouchableOpacity activeOpacity={0.8} onPress={this.changeViewGrid}>
              <Icon name="th-large" size={25} color={this.state.iconColor} />
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.8} onPress={this.changeViewList}>
             <Icon name="list" size={25} style={styles.iconAlign} color= {this.state.iconColor} />
           </TouchableOpacity>
          </View>
    );
  }
}

const styles = StyleSheet.create({
  btnDesign: {
    padding: 10,
    backgroundColor: "#e45",
    width: "30%",
    alignSelf: "center",
    marginBottom: 10
  },
  btnText: {
    color: "#fff",
    textAlign: "center",
    alignSelf: "center"
  }
});

Ссылка на изображение:

app image

Ожидается:

Список

enter image description here

Вид сетки enter image description here

1 Ответ

1 голос
/ 03 июля 2019

Вы можете использовать троичный оператор внутри цветовой опоры, чтобы раскрасить значок в зависимости от переменной. 

// if the this.state.gridView is true colorize the icon green otherwise take the standard color 
<Icon name="th-large" size={25} color={this.state.gridView ? 'green' : this.state.iconColor } />

и здесь вы можете сделать это наоборот: 

// if this.state.gridView is true, take the regular color otherwise use make it green 
<Icon name="list" size={25} style={styles.iconAlign} color= {this.state.gridView ? this.state.iconColor : 'green' } />
...