在 class 组件 react-native 中声明 const

Question

我正在尝试制作网络错误屏幕，以防网络丢失我想显示一个屏幕，其中包含有关网络问题的消息，

在添加一些额外的代码行之前， constructor()和Check_Internet() function 我的代码运行良好。 我正在访问const 商店，但有一个

TransformError SyntaxError: :行中的意外标记-> const store = useStore();

不知何故，我无法弄清楚那里发生了什么。

也许我正在尝试在 class 中添加 const 这就是它出现的原因

应用程序.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { TailwindProvider } from "tailwindcss-react-native";
import { Provider } from "react-redux";
import React, { Component } from 'react'

import Routes from "./routes";
import { useStore } from "./store";

import Lottie from 'lottie-react-native';
import NetInfo from '@react-native-community/netinfo';
import ButtonCstm from "./custom-components/Button";


export default class main extends Component {

  const store = useStore();

  constructor() {
    super();
    this.state = {
      network_status: "",
    }
    this.Check_Internet();

  }

  Check_Internet = async () => {
    await NetInfo.fetch().then(state => {
      console.log("Connection type", state.type);
      console.log("Is Connected", state.isConnected);

      if (state.isConnected == true) {
        this.setState({
          network_status: "online"
        })
      }
      else {
        this.setState({
          network_status: "offline"
        })
      }

    });
  }

  render() {
    if (this.state.network_status == "online") {
      return (
        <TailwindProvider>
          <Provider
            store={store}
          >
            <Routes />
            <StatusBar style="auto" />
            <Text> hey you are online</Text>
          </Provider>
        </TailwindProvider>
      )
    }
    else {
      return (
        <TailwindProvider>
          <Provider store={store} >
            <Routes />
            <StatusBar style="auto" />
            <Lottie style={{ marginBottom: 50, }} source={require('../../assets/animation/no-internet1.json')} autoPlay loop />
            <Text style={styles.txt}> hey you are Offline please check your internet</Text>
            <ButtonCstm
            stylebtn={{
              height: 50,
              width: 200,
              backgroundColor: "rgba(90, 154, 230, 1)",
              borderRadius: 10,
              position: "absolute",
              bottom: 80,

            }}
            title={"Try Again"}
            stylebtntitle={{
              color: colors.black,
              fontWeight: "normal",
              fontSize: 20,
              marginTop: 12,
              textAlign: "center",
              fontFamily: "OpenSans",
            }}
            onPress={this.Check_Internet}
          />
          </Provider>
        </TailwindProvider>
      )
    }
  }
}
const styles = StyleSheet.create({
  txt: {
    fontSize: 20,
    fontWeight: "bold",
  }
});

Answer 1

将您的组件从基于 class 的组件转换为基于 function 的组件以使用挂钩

目前你不能在 class 组件中使用 Hooks 阅读更多关于官方反应文档

Answer 2

Class 组件不能使用 React 钩子。 最佳解决方案是将您的组件从 class 转换为功能性组件。

可能有另一种解决方案可以在 class 组件中实现相同的结果，但如果您希望使用挂钩，它必须是功能组件。