Disable scroll in View on Expo Web

Question

I am using Expo with react native and just have a plain view with some things inside of it. When I run the code as an expo app on my iPhone the view does not scroll vertically or horizontally (as I intended), but on web it does (Safari - after publishing with expo web). I want to disable this scrolling in both directions because I have swipeable components inside the view, so if the whole view moves things just don't work as intended.

How can I do that?

Here is my code:

<View style={styles.MainContainer}>
     
      {this.state.Sample_Card_Array.map((item, key) => (
        <SwipeableCard
          key={key}
          item={item}
          removeCard={this.removeCard.bind(this, item.id)}
          swipedRight={this.swipedRight.bind(this, item)}
          swipedLeft={this.swipedLeft.bind(this, item.songID)}
        />
        
      ))}
      
      {this.state.No_More_Card ? (
        <View style={{flex:1}}>
          <FlatList
            data={this.state.songNamesApproved}
            renderItem={this._renderItem}
          />
          
        </View>
      ) : null}
      
    </View>

this is maincontainer

MainContainer: {
  flex: 1,
  justifyContent:'center',
  alignItems:'center',
  paddingTop: Platform.OS === 'ios' ? 20 : 0,

},

Answer 1

我通过使父视图成为滚动视图解决了这个问题，现在在 Web 上，它在滑动时不再左右滚动。