滚动视图内部视图不起作用react-native

IT技术 reactjs react-native react-native-android
2021-05-11 11:18:46

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

  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个回答

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

 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    ...
</ScrollView>

您应该像这样将工具栏包裹在视图中:

<View><Toolbar/></View>

将要在滚动视图中滚动的那些组件包装为:

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

并为根视图提供 flex 为:

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

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

<View>必须有风格flex:1,也<ScrollView>

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

npx react-native run-android

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

仅供参考,只是按 r (或刷新)也不起作用。我不得不重建它。