在 class 组件 react-native 中声明 const

Question

I'm trying to making network error screen, in case lost network I want to show a screen with message about network issue,

before adding some extra lines of code constructor() and Check_Internet() function my code was working well. I'm accessing const store but there is a

TransformError SyntaxError: : unexpected token at line -> const store = useStore();

don't know somehow,I'm not able to figure it out whats going on there.

maybe I'm trying to add const in class thats why its appearing

App.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

Convert your component from a class based component to a function based component to use hooks

Currently you can't use Hooks inside a class components Read More on the official react docs

Answer 2

Class components cannot use React hooks. Best solution is to convert your component from class to functional.

There may be another solution to achieve the same result in a class component but if you wish to use hooks, it must be a functional component.