水平滚动视图在本机反应中不起作用

Posted 2023-04-19

【中文标题】水平滚动视图在本机反应中不起作用

【英文标题】：Horizontal Scroll View not working in react native

【发布时间】：2021-08-12 16:43:25

【问题描述】：

水平滚动视图在我的 react 本机应用程序中不起作用。下面是我的代码：

  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,
  ,
);

我不确定我哪里出错了。提前感谢您的帮助。

【参考方案1】：

问题在于在循环内部的错误区域 (map) 中使用了 ScrollView。

我们可以将列表文本元素包装在一个 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>
  );

【讨论】：

非常感谢。我尝试了第一个解决方案，它奏效了。我也会研究 Flatlist。