Javascript 在类组件 reactnative 中声明 const

将组件从基于类的组件转换为基于函数的组件以使用挂钩

目前，您不能在类组件中使用钩子 Read More on the official react docs个

Example:

从您的代码中，您可以将组件从基于类转换为基于函数，如下所示:

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 useState and useEffect hooks from react
import React, { Component, useState, useEffect } 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";

// convert class main to function main
export default function main () {
  // initialize network_status state here with useState
  const [network_status, set_network_status] = useState("");

  const store = useStore();
  
  // use useEffect to run Check_Internet when the component mounts
  useEffect(() => {
    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) {
        // set state with set_network_status
        set_network_status("online");
      }
      else {
        // set state with set_network_status
        set_network_status("offline");
      }
    });
  }

  // remove render and return raw jsx
  if (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={Check_Internet}
        />
        </Provider>
      </TailwindProvider>
    )
  }
}
const styles = StyleSheet.create({
  txt: {
    fontSize: 20,
    fontWeight: "bold",
  }
});

你可以在useState和useEffect上阅读更多关于Reaction文档的官方网站

USEFUL LINKS个

• 使用状态:link to useState documentation
• 使用效果:link to useEffect documentation
• 函数和类组件:link to documentation on function and components