反应本土列表视图不会滚动 [英] react native listview won't scroll

问题描述

我刚学反应本地的，和我有ListView的滚动多个问题。使用下面的示例code，在我的Andr​​oid模拟器，它不会在所有的滚动。粘贴code到阵营本土游乐场（ https://rnplay.org/apps/AXOzjw ），并在iOS模拟器有测试它，如果我拉下来就可以了，它滚动回到顶端当我完成了。

我已经通过了一些SO答案阅读，最讲没有弯曲：在容器1台，但我pretty确保我有正确设置。

 使用严格的;VAR阵营=要求（'反应母语'）;
{VAR
  鸭pregistry，
  图片，
  列表显示，
  TouchableHighlight，
  样式表
  文本，
  视图，
} =动作;VAR SampleApp = React.createClass（{
  静：{
    标题：'＆LT;＆的ListView GT; - 简单'，
    说明：数据的高性能，可滚动列表。
  }，
  getInitialState：功能（）{
      变种DS =新ListView.DataSource（{rowHasChanged：（R1，R2）= GT; R1 == R2！}）;
      VAR数据= Object.keys（scores.games）.MAP（函数（K）{返回scores.games [K]}）;
      返回{
        数据源：ds.cloneWithRows（数据），
      };
    }，    渲染：功能（）{
      返回（
        ＆LT;景观风格= {} styles.maincontainer GT＆;
          ＆LT; ListView控件contentContainerStyle = {} styles.list
            数据源= {} this.state.dataSource
            renderRow = {} this._renderRow /＆GT;
        ＆LT; /视图＆gt;
      ）;
    }，  _renderRow：功能（rowData：字符串，sectionID：编号，ROWID：号码）{
      返回（
          ＆LT;视图＆gt;
            ＆LT;文本样式= {styles.item}＆GT;
              {} rowData.name
            ＆LT; /文本＆GT;
          ＆LT; /视图＆gt; ）;
    }，
}）;VAR风格= StyleSheet.create（{
    mainContainer上：{
    的backgroundColor：'蓝'，
    软硬度：1，
    paddingTop：20，
    paddingBottom来：10，
    flexDirection：'列'，
  }，
  列表：
  {
    flexDirection：'列'，
    软硬度：1，
  }，
  项目：{
    的backgroundColor：浅灰色，
    保证金：3，
    软硬度：1，
    高度：60
  }
}）;VAR分数= {
  游戏：[{
    名称：1，
  }，{
    名称：2，
  }，{
    名称：3，
  }，{
    名称：4，
  }，{
    名：5，
  }，{
    名：6，
  }，{
    名：7
  }，{
    名：8
  }，{
    名：9
  }，{
    名：10
  }，{
    名：11
  }，{
    名：12，
  }，{
    名：13，
  }]
};鸭pregistry.registerComponent（'SampleApp'，（）=＆GT; SampleApp）;module.exports = SampleApp;
 

解决方案

而不是：

  contentContainerStyle = {} styles.list
 

只需使用：

  =风格{} styles.list
 

得到它的工作 rel=\"nofollow\">。

I'm just learning react-native, and I have multiple issues with listview scrolling. Using the sample code below, on my android emulator, it won't scroll at all. Pasting the code into React-native playground (https://rnplay.org/apps/AXOzjw) and testing it on the iOS emulator there, if i pull down on it, it scrolls back to the top when i'm done.

I've read through a few SO answers, and most talk about not having flex:1 set on the containers, but i'm pretty sure i have that set properly.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  statics: {
    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },
  getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Object.keys(scores.games).map(function(k) { return scores.games[k] });
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

    render: function() {
      return (
        <View style = {styles.maincontainer}>
          <ListView contentContainerStyle={styles.list}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}  />
        </View>
      );
    },

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
      return (
          <View>
            <Text style={styles.item}>
              {rowData.name}
            </Text>
          </View> );
    },
});

var styles = StyleSheet.create({
    maincontainer: {
    backgroundColor: 'blue',
    flex: 1,
    paddingTop:20,
    paddingBottom:10,
    flexDirection: 'column',
  },
  list: 
  {
    flexDirection: 'column',
    flex:1,
  },
  item: {
    backgroundColor: 'lightgray',
    margin: 3,
    flex:1,
    height: 60
  }
});

var scores = {
  "games": [{
    "name": "1",
  }, {
    "name": "2",
  }, {
    "name": "3",
  }, {
    "name": "4",
  }, {
    "name": "5",
  }, {
    "name": "6",
  }, {
    "name": "7 ",
  }, {
    "name": "8 ",
  }, {
    "name": "9",
  }, {
    "name": "10",
  }, {
    "name": "11",
  }, {
    "name": "12",
  }, {
    "name": "13",
  }]
};

AppRegistry.registerComponent('SampleApp', () => SampleApp);

module.exports = SampleApp;

解决方案

Instead of:

contentContainerStyle={ styles.list }

Just use:

style={ styles.list }

Got it working here.

这篇关于反应本土列表视图不会滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！