如何解决水平滚动视图不适用于本机反应
水平滚动视图在我的本机应用程序中不起作用。这是我的代码如下:
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>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。