异步存储时是否可以在标题中显示 ActivityIndicator？

Question

我想知道每次使用

ActivityIndicator

库更改存储时，是否可以在

header

的

Stack navigator

中显示

Jotai

？

Answer 1

是的，你可以 你可以使用

navigation.setOption

来实现这样的行为

这里有一个例子

const HomeScreen = ({navigation}) => {

  const [count, setCount] = useAtom(countAtom);
  const [isLoading,setIsLoading] = useState(false)


   const renderHeaderRight = React.useCallback(() => {

    return (
      <Pressable onPress={undefined}>
        {isLoading ? <ActivityIndicator /> :  <Text style={{marginHorizontal:12}}>
          clear
        </Text>}
       
      </Pressable>
    );
  }, [isLoading]);


   useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: renderHeaderRight,
    });
  }, [navigation, renderHeaderRight]);


  const onPressCount =  async () => {
    setCount((c) => c + 1);
    setIsLoading(true);
    await sleep(500);
    setIsLoading(false);
  }

  return (
    <View>
      <Text>Home Screen</Text>
      <Text>{count}</Text>
      <Button onPress={onPressCount} title='press me' />
    </View>
  );
};

您可以在docs

中找到更多导航选项