问题描述
水平滚动视图在我的本机应用程序中不起作用。这是我的代码如下:
return (
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
kioskData.map((item,index) => {
return (
<View key={index} style={styles.container1}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}>
<>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</>
</ScrollView>
</View>
);
})
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',color: COLORS.black,backgroundColor: COLORS.white,},container1: {
flex: 1,});
我不确定我哪里出错了。提前感谢您的帮助。
解决方法
问题在于在循环内部的错误区域 (ScrollView
) 中使用了 map
。
我们可以将 List Text 元素包装在一个 ScrollView
组件中,而不是为列表中的每个项目创建一个独立的 ScrollView
。
让我们更新 ScrollView
组件树以解决问题,
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
<View style={styles.container1}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{kioskData.map((item,index) => {
return (
<Fragment key={index}>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</Fragment>
);
})}
</ScrollView>
</View>
)}
</View>
额外提示:
如果列表很大并且有一些性能问题,您可以使用 FlatList
组件实现相同的 UI。
const renderItem = ({item}) => (
<>
<Text>{item.product_price}</Text>
<Text>{item.product_name}</Text>
</>
);
return (
<View style={styles.container}>
{loading ? (
<ActivityIndicator size="large" color={COLORS.blue} />
) : (
<View style={styles.container1}>
<FlatList
data={kioskData}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
)}
</View>
);