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

Question

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

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

我的示例代码

Answer 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>
  );
}