Question

我有这段代码

render() {
  return (
    <View style={styles.container}>
      <TopMenu />
      <ScrollView style={styles.scrollView}>
        {array_with_two_items.map(this.createRow)}
      </ScrollView>
    </View>
  )
}

带样式

scrollView: {
  flex:1,
  marginBottom:0,
},
containter: {
  flex:1,
},

问题是它看起来像这样

+-----------+
|    MENU   |
+-----------+
|   item1   |
+-----------+
|   item2   |
+-----------+
|           |
|   blank   |
|    not    |
| scrollable|
+-----------+

但我希望它看起来像

+-----------+
|    MENU   |
+-----------+
|   item1   |
+-----------+
|   item2   |
+-----------+
| blank,but |
|   still   |
|  part of  |
| scrollview|
+-----------+

我对造型和flexbox几乎没有经验，所以这就是我要问的原因。（菜单不应该是scrollview的一部分）

Answer 1

我想你在这里想要的是flexGrow-flexGrow documentation

<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>

</ScrollView>

Answer 2

只需将道具 contentContainerStyle 赋予ScrollView，如下所示：

<ScrollView
   contentContainerStyle={{
     flex: 1
  }}
>
  /* Other Stuff */
</ScrollView>

如何在本机中将scrollview拉伸到整个屏幕？

2 个答案: