Question

我刚刚开始学习如何使用React Native，并且想在创建一个简单项目时边走边学，我试图创建卡片项目的ScrollView，但似乎无法使其滚动。我一直在研究堆栈溢出，尝试使用诸如flex：1之类的解决方案，但是我似乎无法使其正常工作。

这是我的代码

<ScrollView contentContainerStyle={{flex:1}}>
          <View style={{flexDirection:'row'}}>
            <View style={{flex:0.5}}> 
              <View style={styles.card}><Text>Test</Text></View>
              <View style={styles.card}><Text>Test2</Text></View>
              <View style={styles.card}><Text>Test3</Text></View>
              <View style={styles.card}><Text>Test4</Text></View>
              <View style={styles.card}><Text>Test5</Text></View>
              <View style={styles.card}><Text>Test6</Text></View>
              <View style={styles.card}><Text>Test7</Text></View>
            </View>
            <View style={{flex:0.5}}> 
              <View style={styles.card}><Text>Testi</Text></View>
              <View style={styles.card}><Text>Testii</Text></View>
              <View style={styles.card}><Text>Testiii</Text></View>
              <View style={styles.card}><Text>Testiv</Text></View>
              <View style={styles.card}><Text>Testv</Text></View>
              <View style={styles.card}><Text>Testvi</Text></View>
              <View style={styles.card}><Text>Testvii</Text></View>
            </View>
          </View>
</ScrollView>

我的CSS：

const styles = StyleSheet.create({
  card:
  {
    height:'20%',
    margin:10,
    borderWidth:1,
    borderColor:'#000',
    borderStyle:'solid',
  }
});

Answer 1

尝试以下代码：

import functools
import sys
from PyQt4 import QtGui, QtCore


class QSubAction(QtGui.QAction):
    def __init__(self, text="", parent=None):
        super(QSubAction, self).__init__(text, parent)
        self.setCheckable(True)
        self.setChecked(True)

class QAddAction(QtGui.QAction):
    def __init__(self, icon=None, text="Add Item", parent=None):
        if icon:
            super(QAddAction, self).__init__(icon, text, parent)
        else:
            super(QAddAction, self).__init__(text, parent)

class QCustomMenu(QtGui.QMenu):
    """Customized QMenu."""

    def __init__(self, title, parent=None):
        super(QCustomMenu, self).__init__(title=str(title), parent=parent)
        self.setup_menu()
    def mousePressEvent(self,event):
        action = self.activeAction()
        if not isinstance(action,QSubAction) and action is not None:
            action.trigger()
            return
        elif isinstance(action,QSubAction):
            action.toggle()
            return
        return QtGui.QMenu.mousePressEvent(self,event)
    def setup_menu(self):
        self.setContextMenuPolicy(QtCore.Qt.DefaultContextMenu)

    def contextMenuEvent(self, event):
        no_right_click = [QAddAction]
        if any([isinstance(self.actionAt(event.pos()), instance) for instance in no_right_click]):
            return
        pos = event.pos()

    def addAction(self, action):
        super(QCustomMenu, self).addAction(action)

class Example(QtGui.QMainWindow):
    def __init__(self, parent=None):
        super(Example, self).__init__(parent)
        self.initUI()

    def initUI(self):         
        self.setGeometry(300, 300, 300, 200)
        self.setWindowTitle('Context menu')    

        self.qmenu = QCustomMenu(title='', parent=self)
        add_item_action = QtGui.QAction('Add Main item', self,
            triggered=self.add_new_item)
        self.qmenu.addAction(add_item_action)

    def contextMenuEvent(self, event):
        action = self.qmenu.exec_(self.mapToGlobal(event.pos()))

    def add_new_item(self):
        main_menu_name, ok = QtGui.QInputDialog.getText(
            self,
            'Main Menu',
            'Name of new Menu Item:'
        )
        if ok:
            self._addMenuItemTest(main_menu_name)

    def _addMenuItemTest(self, main_menu_name):
        icon_path = '/user_data/add.png'

        base_qmenu = QCustomMenu(title=main_menu_name, parent=self)
        base_qmenu.setTearOffEnabled(True)                     

        add_item_action = QAddAction(None, 'Add Sub Item', base_qmenu)
        slot = functools.partial(self.add_sub_item, base_qmenu)
        add_item_action.triggered.connect(slot)
        base_qmenu.addAction(add_item_action)
        # self.qmenu.addMenu(base_qmenu)

        test_action = QtGui.QAction(main_menu_name, self)
        test_action.setMenu(base_qmenu)
        test_action.setCheckable(True)
        test_action.setChecked(True)
        self.connect(test_action,QtCore.SIGNAL("triggered(bool)"),self.unsetCheck_action)


        self.qmenu.addAction(test_action)

    def unsetCheck_action(self,checked):

        sender_obj = self.sender()
        if isinstance(sender_obj,QtGui.QAction): 


            sender_obj.setChecked(checked)




    def add_sub_item(self, base_menu):
        sub_menu_name, ok = QtGui.QInputDialog.getText(
            self,
            'Sub Menu',
            'Name of new Sub Item:'
        )
        if ok:

            action = QSubAction(sub_menu_name, self)
            slot = functools.partial(
                self._callActionItem,
                action
            )
            action.setCheckable(True)
            action.setChecked(True)
            action.toggled.connect(slot)
            base_menu.addAction(action)

    def _callActionItem(self, checked, action):
        # This is called twice, False and True again
        print '>>> sub check-state : ', action.isChecked()



if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    window = Example()
    window.show()
    sys.exit(app.exec_())

卡片CSS：

注意：不要忘记导入<ScrollView style={{ flex: 1 }}> <View style={{ flexDirection: 'row', flex: 1 }}> <View style={{ flex: 0.5 }}> <View style={styles.card}><Text>Test</Text></View> <View style={styles.card}><Text>Test2</Text></View> <View style={styles.card}><Text>Test3</Text></View> <View style={styles.card}><Text>Test4</Text></View> <View style={styles.card}><Text>Test5</Text></View> <View style={styles.card}><Text>Test6</Text></View> <View style={styles.card}><Text>Test7</Text></View> </View> <View style={{ flex: 0.5 }}> <View style={styles.card}><Text>Testi</Text></View> <View style={styles.card}><Text>Testii</Text></View> <View style={styles.card}><Text>Testiii</Text></View> <View style={styles.card}><Text>Testiv</Text></View> <View style={styles.card}><Text>Testv</Text></View> <View style={styles.card}><Text>Testvi</Text></View> <View style={styles.card}><Text>Testvii</Text></View> </View> </View> </ScrollView>

Dimensions

Answer 2

您已将flex 0.5应用于两个子视图，

因此，请确保此处的内容在flex中没有固定大小。

您可以删除此0.5柔度，而给width:'50%'并同时删除flex:1，这会导致滚动视图仅利用可见高度。

<ScrollView>
          <View style={{flexDirection:'row'}}>
            <View style={{width:"50%"}}> 
              <View style={styles.card}><Text>Test</Text></View>
              <View style={styles.card}><Text>Test2</Text></View>
              <View style={styles.card}><Text>Test3</Text></View>
              <View style={styles.card}><Text>Test4</Text></View>
              <View style={styles.card}><Text>Test5</Text></View>
              <View style={styles.card}><Text>Test6</Text></View>
              <View style={styles.card}><Text>Test7</Text></View>
            </View>
            <View style={{width:"50%"}}> 
              <View style={styles.card}><Text>Testi</Text></View>
              <View style={styles.card}><Text>Testii</Text></View>
              <View style={styles.card}><Text>Testiii</Text></View>
              <View style={styles.card}><Text>Testiv</Text></View>
              <View style={styles.card}><Text>Testv</Text></View>
              <View style={styles.card}><Text>Testvi</Text></View>
              <View style={styles.card}><Text>Testvii</Text></View>
            </View>
          </View>
</ScrollView>

编辑：由于视图不知道总大小是多少，因此也无法精确计算20％

，因此也将固定高度设置为卡高度而不是百分比。

参见工作示例。 https://snack.expo.io/@jdgalani6297/scrolling-issue

ScrollView无法在React Native中滚动

2 个答案: