水平滾動視圖在本機反應中不起作用

Question

水平滾動視圖在我的本機應用程序中不起作用。 下面是我的代碼：

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

我不確定我哪里出錯了。 提前感謝您的幫助。

Answer 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>

附加提示：

如果列表很大並且有一些性能問題，您可以 go 用於相同 UI 實現的FlatList組件。

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