React Native内置屏幕

在React Native应用程序上实现Onboarding（或Welcome）屏幕的最佳方式是什么？屏幕必须有滑块视图才能在介绍性点和某些系统之间滑动以存储“显示一次”标志。我可以看到如何用香草代码来实现它，但可能存在完整的组件？React Native内置屏幕

来源

2016-03-02 vtambourine

我没有找到任何自定义的一体化组件，但我认为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

来源

2016-03-13 15:29:21 scarmuega

在侧面说明。如果你打算更多地使用'AsyncStorage'，我会建议使用[react-native-simple-store]（https://www.npmjs.com/package/react-native-simple-store）。它包装了'AsyncStorage'的基本功能，并自动为您提供JSON.stringify和JSON.parse的值。 FWIW。 – jasonmerino

我觉得react-native-app-intro几乎是你想要的。它给出了一个基本的寻呼机，默认情况下有一些不错的下一个和完成按钮，但是您可以为每个页面中的元素添加额外的转换效果。

来源

2016-08-02 16:45:30 blackxored

感谢您发布此信息。几天前当我最初看的时候不在这里。 :) –

是的，存在完整的组件：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(); 
    } 
}

来源

2017-10-18 21:47:16

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

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

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

How to detect first launch in react-native

来源

2018-02-13 05:48:33

React Native内置屏幕

回答

相关问题