Question

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

所以基本上，我希望他们的活动班级在选择它时有所不同。我也阅读了一些文档以及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>);
  }
}

希望这会有所帮助！

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

1 个答案: