Question

我试图让React Native ScrollView水平和垂直滚动，但由于某种原因它不会这样做。我知道它不适用于Android，但它应该适用于iOS。

我已经看过这个问题了：https://github.com/facebook/react-native/issues/2962

做了它的建议，但它仍然只向一个方向滚动。

这是我宣布它的方式：

<ScrollView directionalLockEnabled={false} horizontal={true} style={styles.container}>
    {this.buildContent()}
</ScrollView>

关于如何让它滚动两个方向的任何想法？

Answer 1

目前没有直接的方法来实现这一目标。如果设置 contentContainerStyle 道具对您来说不是问题，那么您可以这样做。如果是，您可以始终使用2个嵌套的 ScrollViews 。

<ScrollView>
   <ScrollView horizontal={true}> 
      {this.buildContent()}
   </ScrollView>
</ScrollView>

Answer 2

试试这个：

    <ScrollView
      maximumZoomScale={2}
      minimumZoomScale={1}
      style={{ width: 320 }}
      contentContainerStyle={{ width: 321 }}
    >
      <View style={{ width: 321, height: 320, backgroundColor: "green" }} />
    </ScrollView>

contentContainerStyle Doc此处，该属性正式支持react-native@0.9

Answer 3

这对我有用。

<ScrollView
    horizontal
    bounces={false}
>
    <ScrollView
        nestedScrollEnabled
        bounces={false}
        // You will need to figure out the height of inner content yourself
        contentContainerStyle={{ height: calculateHeight() }}
    >
        <View>
        ...
        </View>
    </ScrollView>
</ScrollView>

React Native ScrollView滚动两个方向

3 个答案: