Question

我想为应用程序创建模态介绍：比如当你第一次下载一个应用程序并看到类似教程时，你可以跳过它

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，没有变化。当我评论映射它的应用程序有效但 Flatlist 没有。

Answer 1

试试这个方法

renderItem={({ item }) => (
     <>
       <Text style={styles.headStyle}>{item.title}</Text>
       <Text style={styles.textStyle}>{item.desc}</Text>
     </>
  )}

如何实现水平滚动平面列表反应原生

1 个答案: