如何使用 typescript 在 React Native 中设置“onPress”的 Switch Toggle 库答案

【问题标题】：How to set "onPress" 's Switch Toggle library in React Native with typescript如何使用 typescript 在 React Native 中设置“onPress”的 Switch Toggle 库
【发布时间】：2019-11-03 07:29:45
【问题描述】：

我需要在我的应用程序中使用开关切换（库 git：dooboolab/react-native-switch-toggle）。我在 react-native 中使用打字稿。为 onPress 手势响应事件设置函数时出现错误。它说：类型 void 不能分配给布尔类型。

import React, {Component} from 'react';
import SwitchToggle form 'react-native-switch-toggle';
import {View} from 'react-native';

export default class Login extends Component{

  state = {
    switchOn : false
  }

  render(){
    return (
      <View>
        <SwitchToggle 
            switchOn={this.state.switchOn}
            onPress = {this.onPress1}  //HERE THE ERROR
        />
      </View>
    )
  }

  onPress1 = () =>{
     this.setState({switchOn:!this.state.switchOn});
  }
}

我该如何解决？

【问题讨论】：

在onPress1函数上可以加一个return false；声明并尝试一下
还不行

标签： typescript react-native

【解决方案1】：

onPress 无法对该功能作出反应。像这样从 onPress 调用函数

onPress = {() =>this.onPress1() }

【讨论】：

现在它说：类型 void 不可分配给类型 '{}'
类型 '() => void' 不可分配给类型 '(event:GestureResponderEvent) => {}'。类型“void”不可分配给类型“{}”。
把你的 onPress 放在父视图中
类型 [...] 中缺少 onPress 属性

【解决方案2】：

您需要使用与 onPress 属性相同的签名键入您的 onPress1 方法。 SwitchToggle 的onPress 具有以下签名：

onPress: (event: GestureResponderEvent) => {};

因此，为了让您将 this.onPress1 传递给 onPress 属性，您需要以这种方式编写您的 onPress1：

onPress1 = (event: GestureResponderEvent) => {
   // do stuff
};

然后在你的 JSX 中：

<SwitchToggle onPress={this.onPress1} />

【讨论】：

in //do stuff I put this: this.setState({switchOn:!this.state.switchOn});还是不行……