修復 React Native CheckBox

Question

我有一個 React Native 項目。 我的理解是 react native 不允許您固有地設置復選框的樣式，因此我使用 react-native-check-box 並查看 expo。

運行時我得到“Unidentified is not an object（評估'this.state.isChecked'）”

我正在使用來自https://www.npmjs.com/package/react-native-check-box#demo的確切建議代碼

出了什么問題？

import React, { useState } from 'react';
import { Text, View, Image } from 'react-native';

import CheckBox from 'react-native-check-box';

import defaultStyles from "../../config/styles";

function AuthorizeInput () {

    return (

        <View style={defaultStyles.authorize}>
        <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=>{
        this.setState({
                isChecked:!this.state.isChecked
            })
        }}
        isChecked={this.state.isChecked}
        />
        <Text style={defaultStyles.authText}>I am an authorized representative of this business.</Text>
        </View>
    );
}

export default AuthorizeInput;

Answer 1

對於功能組件，您不能使用this.setState （僅與 class 一起使用）。 但是，您可以使用useState hook 。 例如：

import React, { useState } from "react";
import { Text, View, Image } from "react-native";

import CheckBox from "react-native-check-box";

import defaultStyles from "../../config/styles";

function AuthorizeInput() {
  // default value is false
  const [checked, setChecked] = useState(false);

  return (
    <View style={defaultStyles.authorize}>
      <CheckBox
        style={{ flex: 1, padding: 10 }}
        onClick={() => setChecked(!checked)}
        isChecked={checked}
      />
      <Text style={defaultStyles.authText}>
        I am an authorized representative of this business.
      </Text>
    </View>
  );
}

export default AuthorizeInput;