React native 根据React Native中的Internet连接状态显示按钮？

我对自己的反应还是有点陌生。我正在尝试检测用户的Internet连接状态，并根据结果显示一个按钮。如果未检测到互联网连接，我想退出应用程序。我的全部代码如下

import React from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux'
import FlatContainer from './components/FlatContainer';
import NetInfo from "@react-native-community/netinfo";

const Welcome = () => {

NetInfo.fetch().then(state => {
  console.log("Connection type", state.type);
  console.log("Is connected?", state.isConnected);
  var _connection = JSON.stringify(state.isConnected)
});

   const goToHome = () => {
      Actions.home()
   }

   return (
    <View style={styles.page}>
      <FlatContainer style={styles.container1}>
          <Text>Welcome!</Text>
      </FlatContainer>
      <FlatContainer style={styles.container2}>

        {_connection === "true" ? (
          <View style={styles.button}>
            <Button title='Button' color='blue' onPress={goToHome}/>
          </View>
        ) : (
         <View style={styles.button}>
            <Button title='Exit' color='blue'/>  //use 'BackHandler' here to exit?
         </View>
        )}

      </FlatContainer>
      <FlatContainer style={styles.container3}>
          <Text>image</Text>
      </FlatContainer>
    </View>
   )
}



const styles = StyleSheet.create({
  page:{
    flex:1,
    paddingTop:50,
    backgroundColor: 'black'
  },
  container1: {
    backgroundColor: 'black',
    height : 100
  },
  container2: {
    backgroundColor: 'black',
    height : 100
  },
  container3: {
    backgroundColor: 'black',
    height : 100
  },
  button:{
    width:80,
    height:40,
    color: 'white',
    backgroundColor: 'white'
  }
});


export default Welcome

问题是，尽管NetInfo似乎可以正常工作以确定Internet连接状态，但我似乎无法将该信息传输到变量连接。该变量用于确定要显示的按钮。似乎无法识别_连接

此外，我相信我需要导入BackHandler模块来编写代码，以允许用户在按下正确的按钮后退出应用程序，但是我还没有编写该部分，因为我的代码由于无法识别的变量而崩溃。非常感谢您的建议。问候

在其他人的一些输入和一些研究之后，我的代码如下所示，它的功能似乎与这里所写的一样：

const Welcome = () => {

const [isConnected, setIsConnected] = useState(false);  //assume NO Internet connectivity...
const netInfo = useNetInfo();

  useEffect(() => {    
  setIsConnected(netInfo.isConnected);  
  });

const goToHome = () => {
  Actions.home()
}

const buttonToShowIfConnected = <Button title='Home' color='blue' onPress={goToHome}/>
const buttonToShowIfNotConnected = <Button title='Exit' color='blue' onPress={goToHome}/>
let conditionalButton = isConnected ? buttonToShowIfConnected : buttonToShowIfNotConnected

return (
<View style={styles.page}>
  <FlatContainer style={styles.container1}>
      <Text>Welcome</Text>
      <Text>Type: {netInfo.type}</Text>
      <Text>Is Connected? {netInfo.isConnected.toString()}</Text>
  </FlatContainer>
  <FlatContainer style={styles.container2}>

{conditionalButton}

  </FlatContainer>
  <FlatContainer style={styles.container3}>
      <Text>image</Text>
  </FlatContainer>
</View>
)
}


const styles = StyleSheet.create({
//stuff
}

我认为问题在于_连接只在.then块内有作用域，所以当您尝试在该块外访问它时，在您的条件中，它是未定义的

我从未使用过NetInfo软件包，但类似这样的软件可能会起作用：

const Welcome = () => {
  // pass true or false to `useState` here depending on whether or not
  // you want to assume the client is or isn't connected by default
  const [isConnected, setIsConnected] = useState() 

  useEffect(() => {
    NetInfo.fetch().then(state => {
      setIsConnected(state.isConnected)
    }
  })

  // skipping other code
  const buttonToShowIfConnected = // your markup goes here
  const buttonToShowIfNotConnected = // your markup goes here
  let conditionalButton = isConnected ? buttonToShowIfConnected : buttonToShowIfNotConnected

  return (
    // markup before button
    {conditionalButton}
    // markup after button
  )
}

这不是唯一的方法，但总的来说，我认为问题在于变量作用域，可能没有完全理解React中的状态。

我认为问题在于_连接只在.then块内有作用域，所以当您尝试在该块外的条件中访问它时，它是未定义的

我从未使用过NetInfo软件包，但类似这样的软件可能会起作用：

const Welcome = () => {
  // pass true or false to `useState` here depending on whether or not
  // you want to assume the client is or isn't connected by default
  const [isConnected, setIsConnected] = useState() 

  useEffect(() => {
    NetInfo.fetch().then(state => {
      setIsConnected(state.isConnected)
    }
  })

  // skipping other code
  const buttonToShowIfConnected = // your markup goes here
  const buttonToShowIfNotConnected = // your markup goes here
  let conditionalButton = isConnected ? buttonToShowIfConnected : buttonToShowIfNotConnected

  return (
    // markup before button
    {conditionalButton}
    // markup after button
  )
}

---

这不是唯一的方法，但总的来说，我认为问题在于变量范围，可能没有完全理解React中的状态。

我认为您需要使用useState声明一个变量，并使用useNetInfo传输该变量。然后

const netInfo=useneinfo useEffect=>{ const unsubscribe=NetInfo.addEventListenerstate=>{ setIsConnectedstate.isConnected } 回来 =>取消订阅

---

}，[]我认为您需要使用useState声明一个变量，并使用useNetInfo传输该变量。然后

const netInfo=useneinfo useEffect=>{ const unsubscribe=NetInfo.addEventListenerstate=>{ setIsConnectedstate.isConnected } 回来 =>取消订阅

---

}，[]谢谢你的答复。等我有机会的时候我会试试的。在您的代码中是ButtonShowIfConnected和ButtonShowIfNotConnected，我假设这是用“button”定义编写的，即我上面的代码，如…正确吗？是的，我在React Native对变量的疯狂处理中挣扎……我不是专家，但是，乍一看，按钮标记看起来不错。再次感谢。我在您提供的代码示例中发现一个语法错误。然而，我做了一些额外的研究，并能够得到一些功能。我在上面的编辑中发布了我的工作代码。问候：谢谢你的回复。等我有机会的时候我会试试的。在您的代码中是ButtonShowIfConnected和ButtonShowIfNotConnected，我假设这是用“button”定义编写的，即我上面的代码，如…正确吗？是的，我在React Native对变量的疯狂处理中挣扎……我不是专家，但是，乍一看，按钮标记看起来不错。再次感谢。我在您提供的代码示例中发现一个语法错误。然而，我做了一些额外的研究，并能够得到一些功能。我在上面的编辑中发布了我的工作代码。问候：谢谢你的回复。除了上述答案之外，这也是一个可行的选择。你能解释一下为什么函数中的第二个参数是[…]吗。。。？这让我对“useffect”函数感到非常困惑。再次感谢。它有一个类似ComponentDidMount和NetInfo.addEventListener的角色，只需调用一次就足够了。无论何时状态改变，我们都会重新更新谢谢你的解释，我想我明白了。我也很感谢您对初始响应的输入，我尝试了一下，发现您的代码中有语法错误。不过，这对我做的一些额外研究很有帮助。问候：好的。祝你好运：>@PangitThanks谢谢你的回复。除了上述答案之外，这也是一个可行的选择。你能解释一下为什么函数中的第二个参数是[…]吗。。。？这让我对“useffect”函数感到非常困惑。再次感谢。它有一个类似ComponentDidMount和NetInfo.addEventListener的角色，只需调用一次就足够了。无论何时状态改变，我们都会重新更新谢谢你的解释，我想我明白了。我也很感谢您对初始响应的输入，我尝试了一下，发现您的代码中有语法错误。不过，这对我做的一些额外研究很有帮助。问候：好的。祝你好运：>@Pangit