滚动在水平平面列表中不起作用，在 React Native 中有多行

Question

我想在 react native 中创建多行的水平平面列表，所以我写了这段代码，平面列表正在渲染但水平滚动不起作用，所以谁能帮我解决什么问题？

我想创建有 2 行的平面列表，用户也可以水平滚动

<FlatList
contentContainerStyle={{ alignSelf: 'flex-start' }}
numColumns={this.state.data.length / 2}
showsVerticalScrollIndicator={false}
horizontal={false}
showsHorizontalScrollIndicator={false}
data={this.state.data}
style={styles.listView}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => this.onPressHandler(item.id)}>
<View style={item.selected == true ?
styles.SelectedPopularServiceView : styles.NormalPopularServiceView}>
<View style={styles.PopularServiceTopView}>
<View style={styles.ViewTopName}>
<Text numberOfLines={33} style={styles.TextName}>
{item.Name}
</Text>
<Image source={imageShareData1} style={styles.ImageInfo} />
</View>
<View style={styles.ViewDiscount}>
<ImageBackground source={images.imageFlagGray} style={styles.BackGroundDiscount} >
<Text style={styles.TextDiscount}> {item.Discount}</Text>
</ImageBackground>
</View>
</View>

<View style={styles.ViewBottom}>
<View style={styles.ViewPrice}>
<Text style={styles.TextNewPrice}>
{item.NewPrice}
</Text>
<Text style={styles.TextOldPrice}>
{item.OldPrice}
</Text>
</View>
<View style={styles.ViewAdd}>
<Image source={images.imageButtonAdded} style={styles.ImageAdd} />
</View>
</View>
</View>
</TouchableWithoutFeedback>
)}
/>

Answer 1

通过从 react-native-gesture-handler 导入 FlatList 对其进行排序。

Answer 2

你可以简单地通过设置horizontal={true}来解决这个问题，并传递如下内容：renderItem={<View style={{ flexDirection: column }}><YoureItem1 /><YoureItem2 /></View>}

例如：

const data = [
[{ id: '0' }, { id: '1' }],
[{ id: '2' }, { id: '3' }],
[{ id: '4' }, { id: '5' }],
[{ id: '6' }, { id: '7' }],
[{ id: '8' }, { id: '9' }],
[{ id: '10' }, { id: '11' }],
[{ id: '12' }, { id: '13' }],
[{ id: '14' }, { id: '15' }],
[{ id: '16' }, { id: '17' }],
[{ id: '18' }, { id: '19' }],
];
export default function App() {
const renderItem = useCallback(({ item }) => {
return (
<View>
<Card {...item[0]} />
<Card {...item[1]} />
</View>
);
}, []);
const keyExtractor = useCallback((item) => {
return item.id;
}, []);
return (
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
horizontal={true}
/>
</View>
);
}

这是给你的样品小吃

Answer 3

只需要添加 ScrollView 像这样包装平面列表：

<ScrollView horizontal>
<FlatList
contentContainerStyle={{ alignSelf: 'flex-start' }}
numColumns={this.state.data.length / 2}
showsVerticalScrollIndicator={false}
horizontal={false}
showsHorizontalScrollIndicator={false}
data={this.state.data}
style={styles.listView}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => this.onPressHandler(item.id)}>
<View style={item.selected == true ?
styles.SelectedPopularServiceView : styles.NormalPopularServiceView}>
<View style={styles.PopularServiceTopView}>
<View style={styles.ViewTopName}>
<Text numberOfLines={33} style={styles.TextName}>
{item.Name}
</Text>
<Image source={imageShareData1} style={styles.ImageInfo} />
</View>
<View style={styles.ViewDiscount}>
<ImageBackground source={images.imageFlagGray} style={styles.BackGroundDiscount} >
<Text style={styles.TextDiscount}> {item.Discount}</Text>
</ImageBackground>
</View>
</View>

<View style={styles.ViewBottom}>
<View style={styles.ViewPrice}>
<Text style={styles.TextNewPrice}>
{item.NewPrice}
</Text>
<Text style={styles.TextOldPrice}>
{item.OldPrice}
</Text>
</View>
<View style={styles.ViewAdd}>
<Image source={images.imageButtonAdded} style={styles.ImageAdd} />
</View>
</View>
</View>
</TouchableWithoutFeedback>
)}
/>
</ScrollView>