Question

在React Native应用程序上实现Onboarding（或Welcome）屏幕的最佳方法是什么？屏幕必须有一个滑块视图，可以在介绍点和一些系统之间滑动，以便存储一次＆＃39;旗。我可以看到如何使用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

我没有找到任何自定义的一体化组件，但我认为ViewPagerAndroid和AsyncStorage的组合可以毫不费力地完成这一操作（两个类都来自反应-native package）。

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

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>
        );

    }

}

然后，对于“show once”标志，您可以在主应用程序的组件中处理它，如下所示：

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 />);
  };

}

此代码仅在第一次执行App时显示Onboarding组件。你也可以在滑块的最后一个视图内的按钮的clic处理程序中将标志设置为“done”，如果用户没有在第一次运行中完成，则重复激活，这取决于你。

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

Answer 4

react-native-app-intro是入职的热门选择，但不再积极维护。因此，我建议您使用react-native-app-intro-slider，这是前一个支持最新React Naive的修改版本。

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

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

How to detect first launch in react-native

Answer 5

您可以使用react-native-app-intro-slider（可自定义的组件）

React Native Onboarding屏幕

5 个答案: