Question

滚动视图不滚动

我正在尝试博览会的示例：

      <View style={{flex: 1}}>
        <ScrollView
          contentContainerStyle={{ flexGrow: 1 }}>
          <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
          </View>
        </ScrollView>
      </View>

Answer 1

也许您可以在ScrollView上添加flex：1

如果不起作用，您可以尝试进行以下操作：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

Answer 2

问题在于，在Android中其他 touchable 会窃取用户的 touch事件，这就是为什么您无法滚动ScrollView，但是它多次在IOS平台上都能正常工作的原因。我猜您只需要向包装了所需ScrollView的视图中添加onStartShouldSetResponder={() => true}。您能尝试下面的代码吗？

   <View onStartShouldSetResponder={() => true}>
      <ScrollView>
        <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap' }}>
          <Item />
          <Item />
          <Item />
          <Item />
          <Item />
          <Item />
        </View>

      </ScrollView>
   </View>

我希望这会有所帮助！

Answer 3

你可以试试吗？

      <View style={{flex: 1}}>
        <ScrollView
          style={{ flex: 1 }}>
          <View style={{flexDirection: 'row', flexWrap: 'wrap' }}>
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
            <Item />
          </View>
        </ScrollView>
      </View>

如果内容的总高度大于滚动视图，则只有滚动视图会滚动。

滚动视图不滚动React Native

3 个答案: