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

Question

我在这里尝试一个简单的代码，但如果将滚动视图保存在另一个视图中，则滚动视图将无法正常工作。代码是这样的：

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

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

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

Answer 1

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

<View><Toolbar/></View>

将要滚动的组件包装在 scrollview 中，如下所示：

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

并为根视图提供弹性：

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

最终您的代码将运行如您所愿。

Answer 2

顶部 <View> 必须具有样式 flex:1，而且 <ScrollView> 也具有

Answer 3

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

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

Answer 4

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

<KeyboardAwaareScrollView enableOnAndroid={true}>
.
.

</KeyboardAwareScrollView>

这将适用于 Android

Answer 5

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

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

    <ScrollView>

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

    </ScrollView>

  </>
 );

Answer 6

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

<SafeAreaView>

<ScrollView>

</ScrollView>

</SafeAreaView>

Answer 7

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

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

Answer 8

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

Answer 9

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

npx react-native run-android

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

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

Answer 10

我为样式设置了高度属性。那对我有用。

我的代码：

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

样式：

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

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

Scroll View inside view not working react native

reactjs

react-native

react-native-android