Scrollview中的React-native Listview不在android中滚动答案

【问题标题】：React-native Listview inside Scrollview not scrolling in androidScrollview中的React-native Listview不在android中滚动
【发布时间】：2017-04-28 09:41:56
【问题描述】：

在我们的 React-native 项目中，我们有一个屏幕，它有一个父 Scrollview（具有拉动刷新），并且在滚动视图中我们有 Listview（作为冷视图）。

在 iOS 中，我们可以滚动滚动视图（父视图）和列表视图（子视图）。

但在 android 中，我们无法滚动 Child Listview。当我们尝试滚动子 Listview 时，父视图正在滚动。子视图没有得到触摸。

这与 React-native 问题有关吗？谁能告诉我如何解决这个问题？

代码sn-p：

<ScrollView contentContainerStyle={styles.contentContainerStyle} refreshControl={this.getRefreshControl()}>
      <View> Some header </View>
      <MyComponent> </MyComponent>
      <ListView /* This list view is not scrolling in Android */
        dataSource={dataSource}
        initialListSize={10}
        renderRow={this.renderRow}
        renderSeparator={this.renderSeparator}/>
  </ScrollView>

【问题讨论】：

请给我看看你当前的代码
你尝试过什么...？
先更新你的代码...
@Prashantpattar，我添加了代码 sn-p。请检查。
我认为你的列表视图很小。尝试在 ListView 的样式属性上设置 flex: 1 或 height: 587。

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

【解决方案1】：

您不应该将 ListView 放在 ScrollView 中，因为 ListView 类实现了自己的滚动，并且它只是不接收手势，因为它们都由父 ScrollView 处理。我强烈建议您以某种方式简化布局。例如，您可以将想要滚动到 ListView 的视图添加为页眉或页脚。

更新：

从 API 级别 21 (Lollipop) 开始，Android SDK 正式支持嵌套滚动容器。 View 和 ViewGroup 类中有很多方法可以提供此功能。要在 Lollipop 上进行嵌套滚动，您必须通过将 android:nestedScrollingEnabled="true" 添加到其 XML 声明或显式调用 setNestedScrollingEnabled(true) 来为子滚动视图启用它。

如果您想在棒棒糖之前的设备上进行嵌套滚动（您可能会这样做），您必须使用 Support 库中相应的实用程序类。首先你必须用 NestedScrollView 替换你的 ScrollView。后者同时实现了 NestedScrollingParent 和 NestedScrollingChild，因此它可以用作父滚动容器或子滚动容器。

但是 ListView 不支持嵌套滚动，因此你需要继承它并实现 NestedScrollingChild。幸运的是，Support 库提供了 NestedScrollingChildHelper 类，因此您只需创建该类的实例并从视图类的相应方法中调用其方法即可。

【讨论】：

【解决方案2】：

我已经完成了一个可以滚动的 ListView ！

ListBillScreen.js

export default class ListBillScreen extends React.Component{

  /*Constructor*/

  render() {
  return (

  <ScrollView style = {styles.container}>

    <View style ={styles.header}>
      <Text style = {styles.textHeader}> Title</Text>
    </View>

  <ListView
    style={styles.listView}
    dataSource={this.state.dataSource}
    renderRow={(data) => <Row {...data} navigator={this.props.navigator} />}
    renderSeparator={(sectionId, rowId) => <View key={rowId} style=
    {styles.separator} />}
  />
  <AndroidBackButton
    onPress={this.popIfExists.bind(this)}
  />
</ScrollView>
);

} }

样式

import { StyleSheet } from 'react-native'
import { Colors, Metrics } from '../../Themes'

export default StyleSheet.create({
  container: {
  paddingTop: 20,
  backgroundColor: Colors.background
},
separator: {
  height: StyleSheet.hairlineWidth,
  backgroundColor: '#8E8E8E',
},
textHeader: {
  color: Colors.steel,
  textAlign: 'center',
},
image: {
  height:64,
  width: 64,
},
listView: {
  paddingTop: 10,
  paddingBottom: 20
},
actionButtonIcon: {
  fontSize: 20,
  height: 22,
  color: 'white',
},
})

即使您添加一些行，它也是完全可滚动的 =)（我的行是使用 JSon 文件创建的，带有 Row.js）

享受吧！

【讨论】：

我也有几乎相同的代码。但它仅适用于 iOS。你检查过Android中的代码吗？
如果我从滚动视图中删除 refreshControl 属性。它也适用于我。但它不适用于用于拉刷新功能的 RefreshControl。您的代码 RefreshControl 中缺少的那个。

【解决方案3】：

listview 和scrollview 触摸事件有冲突。

尝试在您的片段/活动中使用以下代码

listview.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                v.getParent().requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });

【讨论】：

这正是发生的事情。但是我们需要在 react-native android 项目中添加这段代码吗？
亲爱的 Tutu，你找到把这段代码放在 react native 的什么地方了吗？

【解决方案4】：

试试这样，scrollview里面的scrollview都是可滚动的

https://snack.expo.io/rk93R9BCW

【讨论】：

第二个版本更灵活，因为它不会使所有内容在触摸子 ScrollView 时滚动到顶部

【解决方案5】：

ListView需要设置nestedScrollEnabled = true。

【讨论】：

【解决方案6】：

我认为你的列表视图很小。尝试在 ListView 的样式属性上设置 flex: 1 或 height: 587 。 ——

【讨论】：