为活动按钮反应本机自定义单选按钮不同的颜色

Question

我一直在使用一个包 https://www.npmjs.com/package/react-native-custom-radio-group 并且需要在选择单选按钮时获得不同的颜色（活动）。假设我有三个按钮，如果选择了第一个单选按钮，那么它应该是绿色的，如果选择了第二个，它应该是红色的，依此类推。

所以基本上我希望他们的活动 class 在选择时以不同的方式工作。我也浏览了一些文档和 RadioButton.style.js 但找不到任何适当的帮助。提前致谢。

Answer 1

您可以使用包中提供的道具来实现。将选中按钮的值传递给回调函数，并根据该值改变按钮的样式。

这是工作演示：https://snack.expo.io/@cruz404/custom-radio-button

示例代码：

export default class App extends Component {
  constructor(props){
      super(props);
      this.state ={
          activeBgColor: "white",
          activeTxtColor: "black",
          inActiveBgColor: "white",
          inActiveTxtColor: "black",
      };
  }

  changeStyle(value) {
     if(value == "transport_car") {
        this.setState({
              activeBgColor: "red",
              activeTxtColor: "white",
              inActiveBgColor: "white",
              inActiveTxtColor: "black",
        });
     } else if(value == "transport_bike") {
        this.setState({
              activeBgColor: "blue",
              activeTxtColor: "white",
              inActiveBgColor: "white",
              inActiveTxtColor: "black",
        });
     } else if(value == "transport_bus") {
         this.setState({
               activeBgColor: "green",
               activeTxtColor: "white",
               inActiveBgColor: "white",
               inActiveTxtColor: "black",
         });
     }
 }

render () {
  return (
    <View>
      <Text> SELECT: </Text>
      <RadioGroup
            radioGroupList={radioGroupList}
            buttonContainerActiveStyle = {{backgroundColor: this.state.activeBgColor}}
            buttonTextActiveStyle = {{color: this.state.activeTxtColor}}
            buttonContainerInactiveStyle = {{backgroundColor: this.state.inActiveBgColor}}
            buttonTextInactiveStyle = {{color: this.state.inActiveTxtColor}}
            onChange={(value) => {this.changeStyle(value);}}
      />
    </View>);
  }
}

希望对您有所帮助！

为活动按钮反应本机自定义单选按钮不同的颜色

React native custom radio buttons different colors for active button

radio-group

radio-button

react-native