如何在加载下一页或退出时显示活动指示器？答案

【问题标题】：How do I have an activity indicator display while the next page is loading, or when signing out?如何在加载下一页或退出时显示活动指示器？
【发布时间】：2021-07-09 16:28:07
【问题描述】：

退出我的应用程序时，服务器会暂停几秒钟，然后服务器会收到响应，然后将响应发送到我的手机。在中间阶段，屏幕上没有任何反应来说明正在发生的事情。我将如何使用 React Native 中的活动指示器来实现这一点？以下是我的一些代码：

抽屉部分：

    <Drawer.Section style={styles.bottomDrawerSection}>     
            <DrawerItem
            icon={({color, size }) => (
                <Icon 
                    name="exit-to-app"
                    color={color}
                    size={size}
                    />
            )}
            label= {i18n.t('out')}
            onPress = {() => {signOut()}} 
    
        />
        </Drawer.Section>

执行退出响应的源文件中的代码：

 signOut: async() =>{
      let response = await client_instance.logout()
      console.log(response)
      try{
        await AsyncStorage.removeItem('userToken');
      } catch(e) {
        console.log(e);
        }
    dispatch({type: 'LOGOUT'});
   },

【问题讨论】：

标签： javascript python react-native use-effect activity-indicator

【解决方案1】：

你可以使用 react hooks https://reactjs.org/docs/hooks-intro.html

const [loading, setLoading] = useState(false)
return (
  <Drawer.Section style={styles.bottomDrawerSection}>     
        <DrawerItem
        icon={({color, size }) => (
            <Icon 
                name="exit-to-app"
                color={color}
                size={size}
                />
        )}
        label= {i18n.t('out')}
        onPress = {() => {signOut()}} 

    />
    </Drawer.Section>
    {loading ? <ActivityIndicator />: null}
)

然后更新：

signOut: async() =>{
  setLoading(true)
  let response = await client_instance.logout()
  console.log(response)
  try{
    await AsyncStorage.removeItem('userToken');
    setLoading(false)
  } catch(e) {
    setLoading(false)
    console.log(e);
    }
dispatch({type: 'LOGOUT'});

【讨论】：