本地:在Android中不会调用Switch组件onValueChange

I've been struggling with a weird issue in switch components in React Native when running inside Android app.

我一直在为在Android应用程序中运行时在React Native中切换组件的奇怪问题而苦恼。

Lets say, I have a component which render method looks like this:

假设我有一个组件，它的渲染方法是这样的:

render() {
return (
  <View>
    <View>
      <Text>
        Test Title
      </Text>
      <Switch
        value={ this.state.value }
        onValueChange={
          this.test.bind( this )
        }
      />
    </View>
  </View>
);

}

The test method is:

测试方法是:

constructor(props){
  super(props);
  this.state = {
    value: true
  };
}


test(){
 this.setState( {value: !this.state.value})
}

When I run my module inside my iOS app the onValueChange method gets called and everything works as expected, however, when I do the same in my Android app the method never gets called when the value is changed to false. What is more, I cannot change the value more than once i.e I can only set the value to false and it will not allow me to set it to true afterwards. The only way I can play with the switch element again is by holding the bar, nonetheless, the value never gets changed (The switch component doesn't change its color) nor the method called .

当我在我的iOS应用程序中运行我的模块时onValueChange方法会被调用，一切都按预期运行，然而，当我在我的Android应用程序中做同样的事情时，当值变为false时，这个方法就不会被调用。更重要的是，我不止一次地改变这个值。e我只能将值设为false，之后它不会允许我将它设为true。我可以再次使用switch元素的唯一方法是按住bar，但值不会被更改(switch组件不会更改其颜色)，也不会更改所调用的方法。

Has anyone faced something similar? Is this a issue with RN and its Switch component for Android?

有人遇到过类似的情况吗?这是RN及其Android交换机组件的问题吗?

I am using:

我用:

react: 15.4.1
反应:15.4.1
react-native: 0.39
react-native:0.39

***NOTE 1: The onValueChange gets called when I put my RN code inside an activity but it fails when it's inside a fragment.

*** *注1:onValueChange在我将RN代码放入一个活动时被调用，但当它位于一个片段中时就失败了。

2 个解决方案

#1

Try This.

试试这个。

constructor(props){
    super(props);
    this.state = {
      value: true
    };
 }

and in your render

和在你的渲染

render() {
    return (
      <View>
        <Text>
          Test Title
        </Text>
        <Switch
          value={ this.state.value }
          onValueChange={(value) => this.setState({value})}
        />
      </View>
    );
  }

You can remove your test() function

您可以删除test()函数

#2

what works for me is this,

对我有用的是，

constructor(props) {
        super(props)
        this.state = {
            isOpen : false
        }
        this.onControlChange = this.onControlChange.bind(this); 
    }

onControlChange(value) {

    return this.setState({
        isOpen: !this.state.isOpen
    });
 }

and in return use this way

作为回报，用这种方式

render() {
    return (
        <Switch 
            onValueChange={this.onControlChange} 
            value={this.state.isOpen}
        />
    )
}

so i believe that you should declare binding for your function in constructor. I tested this for Android emulator only.

所以我认为应该在构造函数中声明绑定。我只对Android模拟器进行了测试。

Hope this helps.

希望这个有帮助。

#1