typescript - 如何使用 asyncStorage 使用 typescript 在 expo 上构建应用程序介绍滑块

Question

我正在使用 react-native-app-intro-slider 来显示我使用 typescript 在 expo 上构建的应用程序的入门。我希望滑块仅在启动期间首次显示，但似乎遇到了问题。

我对打字稿很陌生，但我环顾四周，所有的解决方案似乎都是使用 asyncStorage 进行本机反应。

不确定我是否在这里做。

import AsyncStorage from '@react-native-community/async-storage'

const data = [{...}, {...}, {...}]

AsyncStorage.setItem('showIntro', 'true')

function App() {
  { (AsyncStorage.getItem('showIntro') === 'true') ? (
      <AppIntroSlider
        renderItem={renderItem}
        data={data}
        onDone={onDone}/>
      ) : (
        <ShowApp />
      )
    }
 }

标签： typescriptreact-nativeexpo

Answer 1

我想onDone一旦你的滑块完成就会被调用。您可以将函数传递给onDone处理程序并将其设置screen为 false。

import AsyncStorage from '@react-native-community/async-storage'

const data = [{...}, {...}, {...}]

const getScreen = async () => {
  return await AsyncStorage.getItem('showIntro'); 
}

function App() {
  const [showIntro, updateShowIntro] = React.useState(getScreen());

  const onDone = () => {
     AsyncStorage.setItem('showIntro', false).then(()=>{});
     updateShowIntro(false);
  }

  return (
  { showIntro ? (
      <AppIntroSlider
        renderItem={renderItem}
        data={data}
        onDone={onDone}/>
      ) : (
        <ShowApp />
      )
    }
  );
 }