如何实现水平滚动flatlist响应本机

Question

我想创建一个应用程序的模式介绍：就像当你第一次下载一个应用程序，看到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不行。

Answer 1

试试这条路

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