反应原生scrollview不能在Android上滚动

时间:2019-03-23 10:08:34

标签: android react-native

我有以下内容:

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

具有这种风格

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;

我的scrollview可在ios上运行,但在android上不行,我也不明白为什么

这是应用程序的图片,如您所见,我需要在android上滚动:

enter image description here

7 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:3)

我有一个类似的问题。罪魁祸首是我的ScrollView上的contentContainerStyle={{flex: 1}}。删除该文件(无论如何,事实证明这是不必要的。)解决了Android上的问题。

答案 2 :(得分:3)

尝试导入

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

而不是来自

<块引用>

'反应原生'

答案 3 :(得分:1)

滚动内容上的样式不是必需的

尝试删除:styles.scroll

如果要居中,只需在组件上添加填充或边距

如果其行在ScrollView上添加props horizo​​ntal = true。

答案 4 :(得分:0)

在styles.scroll中使用flexGrow : 1而不是flex:1

答案 5 :(得分:0)

要在水平分布的内容上实现垂直滚动:

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

答案 6 :(得分:0)

我也有问题中提到的类似结构。我在 View 中有 3 个直接的孩子 ScrollView 并且它没有滚动。我用 flex、flexGrow 等尝试了上述所有解决方案。没有任何效果对我有用。

对我有用的是将所有 3 个直系子级包装到另一个 View,因此对于 ScrollView,只有一个直系子级。

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