反应原生滚动视图不在android上滚动

Question

I have the following component:

export default class StoreComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scroll}>
          <StoreCarouselComponent />
          <StoreDiscountComponent />
          <StoreDetailsComponent />
        </ScrollView>
      </View>
    );
  }
}

with this style

import { StyleSheet, Dimensions, } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  scroll: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  image: {
    width: Dimensions.get('window').width,
    height: 350,
  },
  box: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#ffffff',
    padding: 10,
    marginTop: 410,

  },
  boxDiscount: {
    width: Dimensions.get('window').width - 30,
    position: 'absolute',
    shadowColor: '#000000',
    shadowOpacity: 0.34,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 10
    },
    elevation: 10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: 'lightgrey',
    backgroundColor: '#253241',
    padding: 10,
    marginTop: 320,
  },
  title: {
    fontSize: 30
  },
  distance: {
    fontSize: 20,
    color: '#767676'
  },
  distanceElement: {
    fontSize: 20,
    color: '#44D9E6'
  },
  address: {
    fontSize: 20,
    color: '#767676'
  },
  category: {
    fontSize: 20,
    color: '#767676',
  },
  categoryElement: {
    fontSize: 20,
    color: '#44D9E6',
  },
  hr: {
    borderBottomColor: 'lightgrey',
    borderBottomWidth: 1,
  },
  icons: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  }
});

export default styles;

my scrollview works on ios but on android don't and I don't understand why

here a an image of the app and as you can see I need to scroll on android:

Answer 1

在flexGrow : 1使用flexGrow : 1而不是flex:1

Answer 2

在style={styles.container}使用flex: 1并将其从.scroll删除

Answer 3

I had a similar issue. The culprit turned out to be contentContainerStyle={{flex: 1}} on my ScrollView. Removing that (It turned out to be unnecessary, anyway.) fixed the problem on Android.

Answer 4

try to import from

import { ScrollView } from 'react-native-gesture-handler';

instead of from

'react native'

Answer 5

the styles on your scroll contentContainerStyle is uneccessary

try to remove : styles.scroll

and just give padding or margin on component if you to center it

if its row add props horizontal = true on ScrollView.

Answer 6

To achieve vertical scrolling on a content that's spread horizontally:

return (
    <View style={styles.container}>
      <ScrollView>
        <View
          style={{
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'center',
          }}
        >
          <StoreCarouselComponent />
          <StoreDiscountComponent />
          <StoreDetailsComponent />
        </View>
      </ScrollView>
    </View>
  );

Answer 7

I too had the similar structure as mentioned in question. I had 3 direct children View inside ScrollView and it wasn't scrolling. I tried all above solutions with flex, flexGrow etc. Nothing worked for me.

What worked for me is wrapping all 3 direct children to another View , so for ScrollView there's only one direct children.

// THIS DOES NOT SCROLL
<ScrollView>
  <View>// 1st direct children</View>
  <View>// 2nd direct children</View>
  <View>// 3rd direct children</View>
</ScrollView>


// THIS WILL SCROLL, As now ScrollView has only one direct children
<ScrollView>
  <View>
    <View>// 1st children</View>
    <View>// 2nd children</View>
    <View>// 3rd children</View>
  </View>
</ScrollView>