滚动视图内部视图不起作用反应本机答案

【问题标题】：Scroll View inside view not working react native滚动视图内部视图不起作用反应本机
【发布时间】：2016-11-03 09:24:47
【问题描述】：

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

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

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

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

【问题讨论】：

别忘了 minHeight

标签： reactjs react-native react-native-android

【解决方案1】：

你应该像这样将工具栏包裹在视图中：

<View><Toolbar/></View>

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

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

并将 flex 提供给根视图：

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

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

【讨论】：

根视图上没有 flex:1 对我造成了类似的问题。将 flex:1 添加到根视图和 bam!滚动有效。
很棒的解决方案。谢谢
@ChiranjhiviGhimire 非常感谢。你救了我的命

【解决方案2】：

顶部<View>必须有风格flex:1，<ScrollView>也有

【讨论】：

添加后我无法在 IOS 和 Android 上滚动。
这对我来说真的不起作用。你能看看这里吗？ stackoverflow.com/questions/63437251/…

【解决方案3】：

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

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

【讨论】：

我正在渲染具有滚动视图的子组件，并且父组件也具有滚动视图。我无法正确处理这个。你能帮帮我吗？
在我的情况下什么都不做。
这对我来说真的不起作用。你能看看这里吗？ stackoverflow.com/questions/63437251/…
从 'contentContainerStyle` 中删除 flex: 1 它会破坏滚动。并添加flexGrow: 1。

【解决方案4】：

如果您正在使用来自本机基础的 <Form> 并且您想要滚动然后使用 KeyboardAwareScrollView

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

这将适用于 Android

【讨论】：

【解决方案5】：

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

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

    <ScrollView>

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

    </ScrollView>

  </>
 );

【讨论】：

这对我来说真的不起作用。你能看看这里吗？ stackoverflow.com/questions/63437251/…

【解决方案6】：

如果您使用的是position: "absolute",，请将其删除并尝试。你可以试试

<SafeAreaView>

<ScrollView>

</ScrollView>

</SafeAreaView>

【讨论】：

【解决方案7】：

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

<>
<ScrollView>
 .......... 
</ScrollView>
</>

【讨论】：

【解决方案8】：

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

【讨论】：

这也给我带来了问题。

【解决方案9】：

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

npx react-native run-android

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

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

【讨论】：

【解决方案10】：

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

我的代码：

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

样式：

 listWrapper:{
    // flex:1,
    // flexGrow:1,
    width:'80%',
    height:300,
},

【讨论】：