Question

在Android应用中运行时，我一直在努力解决React Native中的交换机组件中的一个奇怪问题。

让我们说，我有一个渲染方法的组件如下：

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

}

test方法是：

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


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

当我在我的iOS应用程序中运行我的模块时，onValueChange方法被调用，一切都按预期工作，但是，当我在我的Android应用程序中执行相同操作时，当值更改为false时，方法永远不会被调用。更重要的是，我不能多次更改该值，即我只能将该值设置为false，之后不允许我将其设置为true。我可以再次使用开关元件的唯一方法是按住条，但值永远不会改变（开关组件不会改变其颜色），也不会调用方法。

有没有人遇到类似的事情？这是RN及其Android的Switch组件的问题吗？

我正在使用：

反应：15.4.1
react-native：0.39

***注1：当我将RN代码放入一个活动中时会调用onValueChange，但是当它在一个片段中时会失败。

Answer 1

试试这个。

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

并在你的渲染中

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

您可以删除test()功能

Answer 2

对我有用的是

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

onControlChange(value) {

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

并以此方式使用

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

所以我相信你应该在构造函数中为你的函数声明绑定。我仅针对Android模拟器进行了测试。

希望这有帮助。

react-native：在Android中调用Switch Component onValueChange

2 个答案: