Реагируйте на собственные пользовательские переключатели разных цветов для активной кнопки - PullRequest
Новая
       7

Реагируйте на собственные пользовательские переключатели разных цветов для активной кнопки

0 голосов
/ 28 августа 2018

Я работал с пакетом https://www.npmjs.com/package/react-native-custom-radio-group и имею требование получать разные цвета (активные) при выборе переключателей. Допустим, у меня три кнопки, поэтому, если выбрано первое радио, оно должно быть зеленого цвета, если выбрано второе, оно должно быть красного цвета и т. Д.

Так что, в основном, я хочу, чтобы их активный класс работал по-другому при его выборе. Я также просмотрел некоторую документацию, а также RadioButton.style.js, но не смог найти никакой необходимой помощи. Заранее спасибо.

1 Ответ

0 голосов
/ 28 августа 2018

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

Вот рабочая демонстрация: 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>);
  }
}

Надеюсь, это поможет!

...