React Native入门屏幕

Question

在React Native应用程序上实现Onboarding（或欢迎）屏幕的最佳方法是什么？屏幕必须具有滑动视图以在介绍点之间进行滑动，并具有某些系统来存储“显示一次”标志。我可以看到如何使用原始代码实现它，但可能存在完整的组件吗？

- vtambourine

Answer 1

是的，存在一个完整的组件：https://github.com/jfilter/react-native-onboarding-swiper。（我是作者）

在最基本的情况下，您为每个页面提供一个图像、标题和副标题。

要保存标志，请使用AsyncStorage。在启动主屏幕时，检查标志并导航到Onboarding屏幕。完成后，设置标志并导航到主屏幕。例如：

async componentWillMount() {
  const value = await AsyncStorage.getItem('@SKIP_INTRO');
  if (value === null || value !== 'true') {
    this.props.navigateToIntro();
  }
}

- Johannes Filter

Answer 2

我认为react-native-app-intro就是你需要的。它提供一个基本的分页器，带有一些不错的下一页和完成按钮，但你还可以在每个页面的元素中添加额外的过渡效果。

- blackxored

---

如何为屏幕上的元素添加过渡效果？ - Suleiman AbdulMajeed

Answer 3

react-native-app-intro 是一个用于引导用户使用 App 的流行选择，但它已不再受到积极维护。因此，我建议您使用react-native-app-intro-slider，这是前者的修改版本，支持最新的 React Native。

但您应该通过使用 AsyncStorage 自己处理首次启动设置。

以下问题将帮助您检测和设置首次启动。

如何在 React Native 中检测首次启动

- syam s

Answer 4

我没有找到任何自定义的、全能的组件，但我认为一个结合了ViewPagerAndroid和AsyncStorage的组合可能不需要太多努力就可以解决问题（这两个类都来自于react-native包）。

例如，对于滑块视图，您可以创建如下的组件：

import React, { Component, ViewPagerAndroid, View, Text } from 'react-native';

export default class Onboarding extends Component {

    render() {

        return (
          <ViewPagerAndroid style={{ flex: 1 }} initialPage={0}>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>First page</Text>
            </View>
            <View style={{alignItems: 'center', padding: 20}}>
              <Text>Second page</Text>
            </View>
          </ViewPagerAndroid>
        );

    }

}

然后，对于“仅显示一次”标志，您可以像这样在主应用程序组件中处理它：

componentDidMount() {

  AsyncStorage.getItem('onboarding').then((val) => {

    if (!val) {
      this.setState({ onboarding: 'pending' });
      AsyncStorage.setItem('onboarding', 'done').done();
    } else {
      this.setState({ onboarding: val });
    }

  }).done();

}

render() {

  switch (this.state.onboarding) {
    case 'pending': return (<Onboarding />);
    case 'done': return (<Home />);
    default: return (<Loading />);
  };

}

这段代码只会在应用程序第一次执行时显示Onboarding组件。如果用户在第一次运行中没有完成，则可以在滑块最后一个视图内的单击处理程序中将标志设置为“done”，以重复Onboarding，这取决于您。如果您还需要iOS版本，可以使用而不是ViewPagerAndroid。

- santi

---

顺便提一下，如果您计划更频繁地使用 AsyncStorage，我建议使用 react-native-simple-store。它封装了 AsyncStorage 的基本功能，并自动为您执行 JSON.stringify 和 JSON.parse 的值。仅供参考。 - jasonmerino

Answer 5

你可以选择 react-native-app-intro-slider（可自定义组件）

- J.plus.123