Question

我有以下内容：

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上滚动：

Answer 1

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

Answer 2

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

Answer 3

尝试导入

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

而不是来自

<块引用>

'反应原生'

Answer 4

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

尝试删除：styles.scroll

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

如果其行在ScrollView上添加props horizontal = true。

Answer 5

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

Answer 6

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

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

Answer 7

我也有问题中提到的类似结构。我在 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>

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

7 个答案: