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

【问题标题】：React native custom radio buttons different colors for active button为活动按钮反应本机自定义单选按钮不同的颜色
【发布时间】：2019-02-03 05:21:10
【问题描述】：

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

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

【问题讨论】：

检查 onChange 事件的值，如果 button == 1，将 buttonContainerActiveStyle 颜色设置为绿色等？

标签： react-native radio-button radio-group

【解决方案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>);
  }
}

希望这会有所帮助！

【讨论】：