react native hooks 只能在函數組件的主體內部調用

Question

我是新來的反應我需要有關usestate的幫助需要它更改樣式以顯示無保存狀態中的文本然后顯示在內聯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;