35

在这里，我正在尝试一个简单的代码，但如果保留在另一个视图中，滚动视图将不起作用。代码是这样的：

  return(
  <View>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

      </ScrollView>

  </View>
 );

但是，如果滚动视图保持为父视图，它就可以完美地工作。代码如下：

  return(
  <ScrollView>
    <Toolbar title={this.props.title}>
    </Toolbar>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

  </ScrollView>
 );

现在的问题是我不希望我的工具栏上下滚动，我只希望工具栏下方的内容移动。我怎样才能做到这一点？

下一个问题：滚动视图是否必须是父视图才能恢复工作？

4

10 回答 10

54

在样式中使用属性 flexGrow ， flex 对我不起作用。

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>
于 2018-02-16T00:13:35.947 回答
47

您应该像这样将工具栏包装在视图中：

<View><Toolbar/></View>

将要在滚动视图中滚动的组件包装为：

<ScrollView>your expected components...</ScrollView>

并将 flex 提供给根视图：

<View style={{flex:1}}>

最后，您的代码将按预期运行。

于 2016-07-01T05:38:53.773 回答
12

上衣<View>必须有风格flex:1，也<ScrollView>有

于 2016-07-01T05:58:01.873 回答
4

这让我发疯了，因为我按照<view> and <ScrollView>每个人的建议添加了，但没有任何效果。然后我关闭了终端，然后再次使用以下命令重建应用程序：

npx react-native run-android

然后，它开始工作。我希望这可以挽救某人的理智:)

仅供参考，仅按 r （或刷新）也不起作用。我不得不重建它。

于 2021-03-22T03:33:18.207 回答
3

对我来说，使用 TouchableWithoutFeedback 包裹的 Scroll View 有时会导致滚动视图无法运行。

于 2020-10-28T10:09:10.117 回答
1

我为 style 设置了 height 属性。那么它对我有用。

我的代码：

 <View style={styles.listWrapper}>
       <ScrollView >
         <XYZ/>
       </ScrollView>
 </View>

风格：

 listWrapper:{
    // flex:1,
    // flexGrow:1,
    width:'80%',
    height:300,
},
于 2021-06-29T23:49:34.723 回答
0

如果您<Form>从本机基础使用并且想要滚动，请使用 KeyboardAwareScrollView

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

这将适用于Android

于 2019-05-24T10:59:53.483 回答
0

使用反应片段而不是视图来包装它对我有用的滚动视图

<>
<ScrollView>
 .......... 
</ScrollView>
</>
于 2020-08-31T07:59:48.227 回答
-1

2020-02 更新：它将与 React.Fragment <>and </>or <React.Fragment>and一起使用</React.Fragment>。所以试试这个。

return(
  <>
    <Toolbar title={this.props.title}>
    </Toolbar>

    <ScrollView>

      <HomeScreenTop />
      <HomeScreenBottom navigator={navigator}/>

    </ScrollView>

  </>
 );
于 2020-02-20T14:56:38.910 回答
-3

如果您正在使用position: "absolute",删除它并尝试。你可以试试

<SafeAreaView>

<ScrollView>

</ScrollView>

</SafeAreaView>
于 2020-04-06T13:46:24.430 回答