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

此视图是网格视图。

试试这个代码。 ()

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
    }
});

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

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

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>

React Native 中带有包装行的垂直滚动视图

vertical ScrollView with wrapped row in React Native

android

react-native

scrollview

touchableopacity

react-flexbox-grid

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