React Native - 水平平面列表内的水平平面列表

Posted 2023-02-16

【中文标题】React Native - 水平平面列表内的水平平面列表

【英文标题】：React Native - Horizontal flatlist inside horizontal flatlist

【发布时间】：2022-01-22 22:52:30

【问题描述】：

如何让水平列表嵌套在水平列表中？

第一个列表必须有水平定位并且禁用滚动（通过scrollTo()点击实现），第二个应该是带有pagingEnabled的水平列表

My example code

【问题讨论】：

所有相关代码都应该在问题中发布，而不是在外部源中。

【参考方案1】：

我尝试了您的示例，但我也不确定为什么嵌套列表不使用 horizontal 属性显示为水平的。作为一种解决方法，我在嵌套列表中使用了 numColumns 参数，我认为它可以满足您的需求：https://snack.expo.dev/szFpr_XfP

import React from 'react';
import  View, StyleSheet, FlatList, Text, Dimensions, SafeAreaView  from 'react-native';
const width = Dimensions.get('window');

export default function App() 
  const data = [
     type: 'row', text: 'row 1',
     type: 'row', text: 'row 2',
     type: 'list', data: ['Apple', 'Banna', 'Pear', 'Orange', 'Grape', 'Pineapple'],
     type: 'row', text: 'row 3',
     type: 'row', text: 'row 4',
     type: 'row', text: 'row 5',
     type: 'list', data: ['Bike', 'Car', 'Train', 'Plane', 'Boat', 'Rocket'],
     type: 'row', text: 'row 6',
     type: 'row', text: 'row 7',
     type: 'row', text: 'row 8',
  ];

  return (
    <SafeAreaView>
    <FlatList
      data=data
      keyExtractor=item => item.id
      renderItem=(item) => 
        if (item.type === 'row') 
          return (
            <View style=width: width, height: 50, alignItems: 'center', justifyContent: 'center'>
              <Text>item.text</Text>
            </View>
          );
         else 
          return (
            <FlatList
              data=item.data
              keyExtractor=item => item.id
              numColumns=item.data.length
              scrollEnabled=false
              renderItem=(item) => (
                  <View style=width: width, height: 50, alignItems: 'center', justifyContent: 'center'>
                    <Text>item</Text>
                  </View>
                )
              
            />
          );
        
      
      horizontal
      pagingEnabled
    />
    </SafeAreaView>
  );

【讨论】：

这个解决方案对我有用，但现在是一个不同的问题。我的父母FlatList 不应该滚动scrollEnabled=false，但孩子应该。据我了解，由于父母有scrollEnabled=false，滚动也不适用于孩子FlatList。如何解决这个问题？