Question

在我们的React原生项目中，我们有一个屏幕，它有一个父Scrollview（带有pull to refresh），在scrollview中我们有Listview（作为chilld视图）。

在iOS中，我们可以滚动Scrollview（父级）以及Listview（子视图）。

但是在android中，我们无法滚动Child Listview。当我们尝试滚动子Listview时，父视图将滚动。儿童视图没有获得触摸。

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

代码段：

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

Answer 1

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

更新：

从API Level 21（Lollipop）开始，Android SDK正式支持嵌套滚动容器。 View和ViewGroup类中有许多方法可以提供此功能。要在Lollipop上进行嵌套滚动工作，您必须通过添加android：nestedScrollingEnabled =＆＃34; true＆＃34;来为子滚动视图启用它。到它的XML声明或显式调用setNestedScrollingEnabled（true）。

如果要在Lollipop之前的设备上进行嵌套滚动工作（您可能需要这样做），则必须使用支持库中的相应实用程序类。首先，您必须使用NestedScrollView替换ScrollView。后者实现NestedScrollingParent和NestedScrollingChild，因此它可以用作父或子滚动容器。

但ListView不支持嵌套滚动，因此您需要对其进行子类化并实现NestedScrollingChild。幸运的是，Support库提供了NestedScrollingChildHelper类，因此您只需创建此类的实例并从视图类的相应方法调用其方法。

Answer 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 ）

享受！

Answer 3

listview和scrollview触摸事件都是冲突的。

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

listview.setOnTouchListener(new OnTouchListener() {

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

Answer 4

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

https://snack.expo.io/rk93R9BCW

Answer 5

我认为你的listview很小。尝试在ListView的样式属性上设置flex：1或height：587。 -

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

5 个答案: