React Native Onboarding屏幕

Question

在React Native应用程序上实现Onboarding(或Welcome)屏幕的最佳方法是什么？屏幕必须有一个滑块视图,可以在介绍点和一些系统之间滑动以存储"show once"标志.我可以看到如何使用vanilla代码实现它,但可能存在完整的组件？

Answer 1

我认为react-native-app-intro几乎就是你想要的.它提供了一个基本的寻呼机,默认情况下有一些很好的下一个和完成按钮,但你可以为每个页面中的元素添加额外的过渡效果.

Answer 2

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

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

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

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

Answer 3

React-native-app-intro是入门的一个流行选择，但它不再被积极维护。所以我建议你使用react-native-app-intro-slider，它是前一个版本的修改版本，支持最新的React Naive。

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

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

如何检测react-native中的首次启动

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 组件。您还可以在滑块最后一个视图内的按钮的 CLIC 处理程序中将标志设置为“完成”，如果用户在第一次运行中未完成，则重复登录，这取决于您。

如果您还需要 iOS 版本，您可以<ScrollView pagingEnabled={true}>使用ViewPagerAndroid