Question

import React from "react";
import { StatusBar, StyleSheet } from "react-native";
import { Fontisto } from "@expo/vector-icons";
import SwitchSelector from "react-native-switch-selector";

const options = [
  { label: "M", value: "M", customIcon: <Fontisto name="male" size={20} /> },
  { label: "F", value: "F", customIcon: <Fontisto name="female" size={20} /> },
];
<SwitchSelector
  options={options}
  initial={0}
  selectedColor={"#ffffff"}
  borderColor={"#cccccc"}
  buttonColor={"#539670"}
  onPress={(value) => console.log(`Call onPress with value: ${value}`)}
  selectedTextContainerStyle={{ color: "#ffffff" }}
  borderWidth="2"
/>;

以上代码未更新选项选择时的图标颜色需要更改图标颜色文本颜色更改工作但图标颜色未更新。

Answer 1

使用本机状态来动态改变按下事件的颜色状态。

import { StatusBar, StyleSheet } from "react-native";
import { Fontisto } from "@expo/vector-icons";
import SwitchSelector from "react-native-switch-selector";

 handleClick = (value) => {
    let iconColourorg='';
    if(value =='M'){
         iconColourorg = 'iconColourF';
    }else{
         iconColourorg = 'iconColourM';
    }
 
    let iconColour = 'iconColour'+value;
     this.setState({
       [iconColour] : '#ffffff',
       [iconColourorg] :'#000000',
            },()=>{
            console.log(`Call onPress with value: ${value}`)
         });
}

<SwitchSelector
  options={[
  { label: 'M', value: 'M',customIcon:<Fontisto name="male" size={20}  color={this.state.iconColourM} /> },
  { label: 'F', value: 'F',customIcon:<Fontisto name="female" size={20} color={this.state.iconColourF}  />  }
         ]} 
initial={0} 
selectedColor={'#ffffff'} 
borderColor={'#cccccc'}  
buttonColor={'#539670'} 
onPress={(value) =>
  this.handleClick(value)
}  
/>

选择时反应本机 SwitchSelector 更改图标颜色

1 个答案: