我想创建一个应用程序的模式介绍:就像当你第一次下载一个应用程序,看到smth一样的教程,你可以跳过它
const WelcomeCarousel = (props) => {
const [isPagerVisible, setisPagerVisible] = useState(true)
const [pageIndex, setPageIndex] = useState(0)
// pager content
const pages = [
{
title: "Welcome to the Milton Keynes travel app",
desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu pellentesque urna."
},
// {
// title: "Read your smartcard and collect products",
// desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu pellentesque urna."
// },
// {
// title: "View nearby travel options and routes",
// desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu pellentesque urna."
// }
];
/**
* hide initial page
*/
const togglePager = (): void => {
LayoutAnimation.easeInEaseOut();
setisPagerVisible(false);
};
/**
* control pager current index
*/
const handlePageChange = (pageIndex: number): void => setPageIndex(pageIndex);
/**
* on skip button, skip all messages
*/
const skipTutorial = (): void => Navigation.navigate("SwiftCard");
return (
<View style={styles.box}>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
decelerationRate="fast"
bounces={false}
data={pages}
renderItem={_ => (
<View>
{pages.map(item => {
return (
<>
<Text style={styles.headStyle}>{item.title}</Text>
<Text style={styles.textStyle}>{item.desc}</Text>
</>)
})}
</View>
)}
/>
<RightArrow />
<TouchableOpacity
style={styles.skipLabelContainer}
>
<Text style={styles.skipLabel}>
{pageIndex === 3 ? Strings.close : Strings.skip}
</Text>
</TouchableOpacity>
</View>
// </ScrollView>
);
}
export default WelcomeCarousel;
问题是跳过按钮是可见的,箭头符号是导入的组件,但数据是不可见的,模拟器崩溃。我杀了bundler,没有改变。当我评论时,mapping it app可以工作,但Flatlist不行。
试试这条路
renderItem={({ item }) => (
<>
<Text style={styles.headStyle}>{item.title}</Text>
<Text style={styles.textStyle}>{item.desc}</Text>
</>
)}