在React Native应用程序上实现Onboarding(或Welcome)屏幕的最佳方式是什么?屏幕必须有滑块视图才能在介绍性点和某些系统之间滑动以存储“显示一次”标志。我可以看到如何用香草代码来实现它,但可能存在完整的组件?React Native内置屏幕
回答
我没有找到任何自定义的一体化组件,但我认为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
我觉得react-native-app-intro几乎是你想要的。它给出了一个基本的寻呼机,默认情况下有一些不错的下一个和完成按钮,但是您可以为每个页面中的元素添加额外的转换效果。
感谢您发布此信息。几天前当我最初看的时候不在这里。 :) –
是的,存在完整的组件: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();
}
}
react-native-app-intro是入职的热门选择,但它不再是积极维护。所以我建议你去react-native-app-intro-slider,前一个支持最新的React Naive的修改版本。
但是,您应该使用AsyncStorage
自己处理首次启动设置。
下面的问题将帮助您检测并设置首次启动。
- 1. 重置主屏幕的导航堆栈(React Navigation和React Native)
- 2. 在React-Native中定位多个屏幕
- 3. 如何禁用屏幕旋转(react-native)?
- 4. react-native红色屏幕错误
- 5. react-native-navigation抽屉不改变屏幕
- 6. React Native真正的屏幕大小
- 7. React native - x秒后更改屏幕
- 8. React Native - 如何设置独立查看大小屏幕大小?
- 9. 如何在React Native的屏幕底部放置一个TextInput?
- 10. 如何将React Native应用导航重置为React导航的当前屏幕
- 11. 如何在react-native iOS中获得正确的屏幕宽度?
- 12. 应用程序卡在Splash屏幕上react-native-navigation
- 13. React Native Android中的屏幕之间的导航?
- 14. React-Native:新项目上的空白屏幕
- 15. React-Native键盘显示时的实际屏幕尺寸
- 16. 在React Native App上停止屏幕旋转
- 17. 在屏幕中心动画框扩展(React Native Animated)
- 18. Android版在React Native中的初始屏幕
- 19. 在Android上使用react-native的简单登录屏幕
- 20. React Native:在屏幕之间传递数据
- 21. React-Native:显示加载屏幕直到加载webview
- 22. 如何使用React Native检测屏幕解锁?
- 23. react-native:在屏幕中心显示微调
- 24. StackNavigation不会将屏幕添加到堆栈React Native
- 25. 将数组打印到React Native中屏幕
- 26. 更新React Native Redux中的状态后出现空白屏幕
- 27. 使用react-native缩放大于屏幕分辨率的图像
- 28. 关于React Native初始屏幕的错误
- 29. 将用户导航到listitem上的新屏幕点击React native
- 30. React-native如何在文本输入上移动屏幕
在侧面说明。如果你打算更多地使用'AsyncStorage',我会建议使用[react-native-simple-store](https://www.npmjs.com/package/react-native-simple-store)。它包装了'AsyncStorage'的基本功能,并自动为您提供JSON.stringify和JSON.parse的值。 FWIW。 – jasonmerino