如何实现水平滚动flatlist react native

Posted 2023-03-14

【中文标题】如何实现水平滚动flatlist react native

【英文标题】：how to implement horizontal scroll flatlist react native

【发布时间】：2021-03-12 14:39:48

【问题描述】：

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

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;

问题是跳过按钮可见，箭头符号是导入组件但数据不可见，模拟器崩溃。我杀死了捆绑器，没有任何变化。当我评论映射时，它的应用程序可以工作，但 Flatlist 不能。

【参考方案1】：

试试这个方法

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