react native hooks 只能在函数组件的内部调用

Question

我是 React 新手我需要使用状态方面的帮助需要它更改样式以显示 none 保存状态中的文本然后显示在内联中使用它 css 代码如下

import React, { useState, Component, useEffect } from 'react';
import { StyleSheet, Text, View, Alert, Image} from "react-native";
import MashButton from "./src/CustomButton";
import Mashcalculator from "./src/calculator";
import { Textfit } from "react-textfit";
import NetInfo from "@react-native-community/netinfo";


const runstartfunc = (res) =>{
  if (res == 'Connected'){
      createTwoButtonAlert('continue');
  }else{
      createTwoButtonAlert('text');
  }
}


const unsubscribe = NetInfo.addEventListener(state => {
     if(state.isConnected == true){
        runstartfunc('Connected');
     }else{
        runstartfunc('Not Connected');
     }
});


const App = () => (  
  const [hidelogo, setHide] = useState("display:none;");

  useEffect(() => { 
  // Update the document title using the browser API
  unsubscribe();
}),

  <View style={styles.container}>
     <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} />
     <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 5,
    paddingRight: 5,
    backgroundColor: "#2e0739",
    alignItems:"center",
    justifyContent: "center",
  },
  logotext: {
    fontSize: 25,
    color: '#12cfed',
    fontWeight: "bold",
  },
  tinyLogo: {
    marginBottom: 10,
    width: 80,
    height: 80,
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
 }
 });

export default App;

每当我运行上面的代码我得到这个错误

ERROR 错误：挂钩调用无效。挂钩只能在函数体内调用 组件。这可能由于以下原因之一而发生： 1。您的 React 和渲染器版本可能不匹配（例如 React DOM） 2。你可能违反了 Hooks 规则 3。您可能在同一个应用程序中拥有多个 React 副本

我不知道哪里出了问题，如果你们能帮我解决这个问题，我将不胜感激

Answer 1

import React, { useState, Component, useEffect } from 'react';
import { StyleSheet, Text, View, Alert, Image} from "react-native";
import MashButton from "./src/CustomButton";
import Mashcalculator from "./src/calculator";
import { Textfit } from "react-textfit";
import NetInfo from "@react-native-community/netinfo";


const runstartfunc = (res) =>{
  if (res == 'Connected'){
      createTwoButtonAlert('continue');
  }else{
      createTwoButtonAlert('text');
  }
}


const unsubscribe = NetInfo.addEventListener(state => {
     if(state.isConnected == true){
        runstartfunc('Connected');
     }else{
        runstartfunc('Not Connected');
     }
});


const App = () => {

const [hidelogo, setHide] = useState("display:none;");

  useEffect(() => { 
  // Update the document title using the browser API
  unsubscribe();
})
   return( <View style={styles.container}>
     <Image id="logo" style={styles.tinyLogo} source={require("./assets/logo.png")} />
     <Text id="logo-text" style={[styles.logotext, {hidelogo}]}>Show Bookie</Text>
  </View>
)
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingLeft: 5,
    paddingRight: 5,
    backgroundColor: "#2e0739",
    alignItems:"center",
    justifyContent: "center",
  },
  logotext: {
    fontSize: 25,
    color: '#12cfed',
    fontWeight: "bold",
  },
  tinyLogo: {
    marginBottom: 10,
    width: 80,
    height: 80,
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold",
    marginBottom: 15,
 }
 });

export default App;

react native hooks 只能在函数组件的内部调用

react native hooks can only be called inside body of a function component

javascript

react-native

react-hooks