垂直ScrollView与React Native中的包装行

Question

我是React Native的新手，正在努力使ScrollView正常工作。

我正在尝试在整个页面中成对排列的TouchableOpacity组件的垂直滚动列表，例如

这是将TouchableOpacity组件包装在View中时该应用程序的外观，但是（显然）它不可滚动。如果我将“视图”更改为“ ScrollView”，则组件的排列不再正确，它们现在看起来像这样：

它们仍然不可滚动，并且布局也无法正常工作。

到目前为止（还有实现这一目标的更好方法吗？）我试图通过将容器设置为具有flexDirection：row并打开wrap并适当调整子组件的大小以适合两个来创建布局。在整个屏幕上。

我正在使用的代码的近似值是：

export default class App extends React.Component {
  render() {
    return (
      <ScrollView style={styles.container}>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
              <Text style={styles.buttonText}>TouchableOpacity</Text>
          </TouchableOpacity>
      </ScrollView>
    );

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
      height: 3440,
      minHeight: 3440,
      width: 1280,
      minWidth: 1280,
      flexGrow: 1,
      flexDirection: 'row',
      flexWrap: 'wrap'
  },
    newButton: {
       height: 180,
       width: 620,
        margin: 5,
        borderRadius: 10,
        alignContent: 'center',
        justifyContent: 'center',
      backgroundColor: 'darkblue'
    },
    buttonText: {
      alignSelf: 'center',
        fontSize: 36,
        color: 'white',
    }
});

Answer 1

此视图是网格视图。

尝试此代码。 （reference）

var TestCmp = React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Array.apply(null, {length: 20}).map(Number.call, Number);
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

    render: function() {
      return (
        <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
      );
    }
});

这是样式对象：

var styles = StyleSheet.create({
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        backgroundColor: 'red',
        margin: 3,
        width: 100
    }
});

我们在包装行中设置项目，并设置每个子对象的宽度。

有很多依赖项。这将使您的工作变得容易。

1. https://github.com/GeekyAnts/react-native-easy-grid#readme
2. https://github.com/idibidiart/react-native-responsive-grid#readme
3. https://github.com/phil-r/react-native-grid-component#readme
4. https://github.com/yelled3/react-native-grid-example
5. https://github.com/toystars/react-native-layout-grid#readme

Answer 2

  <ScrollView>
    <View style={styles.container}>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => doAThing()} style={styles.newButton}>
          <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>
    </View>
  </ScrollView>