Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

nuke-list-view

Package Overview
Dependencies
Maintainers
3
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuke-list-view - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

docs/resetLoad.md

319

docs/basic.md
# ListView demo
- order: 0
* order: 0
包含无限下拉，resetLoadmore等
包含无限下拉，resetLoadmore 等
---
````js
```js
/** @jsx createElement */
import { createElement, PureComponent, Component, render } from 'rax';
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';

@@ -16,25 +16,90 @@ import Text from 'nuke-text';

import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import Image from 'nuke-image';
import Button from 'nuke-button';
import ListView from 'nuke-list-view';
const originalData = [];
for (let i = 0; i < 20; i++) {
originalData.push({ id: i, text: '列表项' });
}
class ListItem extends PureComponent {
render() {
const { id, text, onPress } = this.props;
return (
<Touchable
id={`cell_${id}`}
style={styles.cellItem}
onPress={() => {
onPress(id);
}}
>
<Text style={styles.itemTextList}>{text}-{id}</Text>
</Touchable>
);
import Modal from 'nuke-modal';
import Page from 'nuke-page';
let originalData = [
{
key: 'b0',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b1',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b2',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b3',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b4',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b5',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b6',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b7',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b8',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b9',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b10',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b11',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b12',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b13',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b14',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
},
{
key: 'b15',
text: '所有类别',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
}
}
];

@@ -45,27 +110,64 @@ class ListViewDemo extends Component {

this.state = {
data: [...originalData],
isRefreshing: false,
showLoading: true,
refreshText: '↓ 下拉刷新',
list1: {
data: [...originalData],
isRefreshing: false,
showLoading: true,
refreshText: '↓ 下拉刷新'
},
list2: {
data: [...originalData],
isRefreshing: false,
showLoading: true,
refreshText: '↓ 下拉刷新'
}
};
this.onRefresh = this.onRefresh.bind(this);
this.renderItem = this.renderItem.bind(this);
this.onLoadMore = this.onLoadMore.bind(this);
this.renderHeader = this.renderHeader.bind(this);
this.renderFooter = this.renderFooter.bind(this);
this.index = 0;
this.index2 = 0;
}
setListState(list, data) {
let newState = Object.assign(this.state[list], data);
this.setState(newState);
}
onItemPress(index) {
console.log(`clicked ${index}`);
linkTo(item, e) {
console.log(e);
}
onRefresh(e) {
this.setState({
renderInner(length, item, index) {
const wrapStyle =
index === length - 1
? [styles.cellItem, styles.cellItemLast]
: styles.cellInner;
return (
<Touchable style={wrapStyle} onPress={this.linkTo.bind(this, item)}>
{item.icon ? (
<Image style={styles.icon} source={{ uri: item.icon }} />
) : null}
<Text style={styles.itemTextList}>{item.text}</Text>
{item.sub ? <Text style={styles.sub}>{item.sub}</Text> : null}
{item.arrow ? <Icon name="arrowRight" style={styles.arrow} /> : null}
</Touchable>
);
}
renderItem(length, item, index) {
if (index == length - 1) {
return this.renderInner(length, item, index);
} else {
return (
<View style={styles.cellItem}>
{this.renderInner(length, item, index)}
</View>
);
}
}
handleRefreshList1(e) {
var self = this;
self.setListState('list1', {
isRefreshing: true,
refreshText: '加载中',
refreshText: '加载中'
});
setTimeout(() => {
this.setState({
self.setListState('list1', {
isRefreshing: false,
data: [...originalData],
refreshText: '↓ 下拉刷新',
refreshText: '↓ 下拉刷新'
});

@@ -75,32 +177,27 @@ }, 1000);

onLoadMore() {
// 模拟网络加载
setTimeout(() => {
this.state.data.push({
id: 'b100',
handleLoadMoreList1 = () => {
var self = this;
setTimeout(function() {
// 这里进行异步操作
self.state.list1.data.push({
key: 'b100',
text: '新数据',
icon: '//img.alicdn.com/tfs/TB1W.9QPVXXXXbBXVXXXXXXXXXX-36-36.png'
});
this.setState({
data: this.state.data,
});
}, 300);
}
renderHeader() {
self.setListState('list1', self.state.list1);
}, 1000);
};
headerList1 = () => {
return (
<RefreshControl
style={styles.refresh}
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
refreshing={this.state.list1.isRefreshing}
onRefresh={this.handleRefreshList1.bind(this)}
>
<Text style={styles.loadingText}>{this.state.refreshText}</Text>
<Text style={styles.loadingText}>{this.state.list1.refreshText}</Text>
</RefreshControl>
);
}
renderItem(item, index) {
return (
<ListItem id={item.id} text={item.text} onPress={this.onItemPress} />
);
}
renderFooter() {
this.state.showLoading ? (
};
footerList1 = () => {
return this.state.list1.showLoading ? (
<View style={[styles.loading]}>

@@ -110,14 +207,20 @@ <Text style={styles.loadingText}>加载中...</Text>

) : null;
}
};
render() {
const { data } = this.state;
return (
<ListView
renderHeader={this.renderHeader}
renderFooter={this.renderFooter}
renderRow={this.renderItem}
dataSource={data}
style={styles.listContainer}
onEndReached={this.onLoadMore}
/>
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.text}>带下拉加载及下拉刷新的list</Text>
</View>
<ListView
renderHeader={this.headerList1}
renderFooter={this.footerList1}
renderRow={this.renderItem.bind(this, this.state.list1.data.length)}
dataSource={this.state.list1.data}
style={styles.listContainer}
onEndReachedThreshold={200}
onEndReached={this.handleLoadMoreList1}
/>
</View>
);

@@ -127,42 +230,80 @@ }

const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
textContainer: {
width: 750,
height: 80,
justifyContent: 'center',
alignItems: 'center'
},
text: {
color: '#424242'
},
listContainer: {
flex: 1,
height: '500rem'
},
cellItem: {
backgroundColor: '#ffffff',
'backgroundColor:active': '#f2f3f7',
height: 160,
[`backgroundColor:active`]: '#f2f3f7',
height: '96rem',
paddingLeft: '30rem'
},
cellInner: {
flex: 1,
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 1,
flexDirection: 'row'
},
cellItemLast: {
backgroundColor: '#ffffff',
height: '96rem',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
paddingLeft: '30rem',
alignItems: 'center',
flexDirection: 'row'
},
icon: {
color: '#c7c7cc',
width: '72rem',
height: '72rem',
marginRight: '26rem'
//position:'absolute',
//top:'34rem',
//right:'24rem'
},
itemTextList: {
fontSize: 32,
color: '#5F646E',
fontSize: '32rem',
color: '#5F646E'
},
refresh: {
height: 80,
width: 750,
height: '80rem',
width: '750rem',
backgroundColor: '#cccccc',
justifyContent: 'center',
alignItems: 'center',
alignItems: 'center'
},
loading: {
height: 80,
width: 750,
height: '80rem',
display: 'flex',
width: '750rem',
flexDirection: 'row',
backgroundColor: '#cccccc',
alignItems: 'center',
justifyContent: 'center',
justifyContent: 'center'
},
loadingText: {
color: '#666666',
},
color: '#666666'
}
};
render(<ListViewDemo />);
````
```

4

HISTORY.md
# Changelog
## 1.0.2 / 2017-11-23
* [[692307a](http://gitlab.alibaba-inc.com/nuke/list-view/commit/692307a7ac5c2d37a8afc2f4c9b5b59c0e1c7e2c)] - `feat` update scrollview & h5 refresh control
## 1.0.1 / 2017-11-04

@@ -5,0 +9,0 @@

242

lib/index.js

@@ -11,3 +11,3 @@ /** @jsx createElement */

Object.defineProperty(exports, "__esModule", {
value: true
value: true
});

@@ -46,141 +46,143 @@

var ListView = function (_Component) {
_inherits(ListView, _Component);
_inherits(ListView, _Component);
function ListView() {
var _ref;
function ListView() {
var _ref;
var _temp, _this, _ret;
var _temp, _this, _ret;
_classCallCheck(this, ListView);
_classCallCheck(this, ListView);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListView.__proto__ || Object.getPrototypeOf(ListView)).call.apply(_ref, [this].concat(args))), _this), _this.resetLoadmore = function () {
_this.refs.list.resetLoadmore && _this.refs.list.resetLoadmore();
}, _this.scrollTo = function (options) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListView.__proto__ || Object.getPrototypeOf(ListView)).call.apply(_ref, [this].concat(args))), _this), _this.resetLoadmore = function () {
_this.refs.list.resetLoadmore && _this.refs.list.resetLoadmore();
}, _this.scrollTo = function (options) {
var x = parseInt(options.x);
var y = parseInt(options.y);
var x = parseInt(options.x);
var y = parseInt(options.y);
if (_nukeEnv.isWeex) {
var dom = require('@weex-module/dom');
var firstCell = _this.hasHeader ? (0, _rax.findDOMNode)(_this.refs.cell1) : (0, _rax.findDOMNode)(_this.refs.cell0);
dom.scrollToElement(firstCell.ref, {
offset: x || y || 0
});
} else {
_this.refs.list.scrollTo(options);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
if (_nukeEnv.isWeex) {
var dom = require('@weex-module/dom');
var firstCell = _this.hasHeader ? (0, _rax.findDOMNode)(_this.refs.cell1) : (0, _rax.findDOMNode)(_this.refs.cell0);
dom.scrollToElement(firstCell.ref, {
offset: x || y || 0
});
} else {
_this.refs.list.scrollTo(options);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
_createClass(ListView, [{
key: 'getChildContext',
value: function getChildContext() {
return {
isInARecyclerView: true
};
}
}, {
key: 'getChidren',
value: function getChidren() {
var _props = this.props,
children = _props.children,
renderHeader = _props.renderHeader,
renderFooter = _props.renderFooter,
renderRow = _props.renderRow,
_props$dataSource = _props.dataSource,
dataSource = _props$dataSource === undefined ? [] : _props$dataSource;
_createClass(ListView, [{
key: 'getChildContext',
value: function getChildContext() {
return {
isInARecyclerView: true
};
}
}, {
key: 'getChidren',
value: function getChidren() {
var _props = this.props,
children = _props.children,
renderHeader = _props.renderHeader,
renderFooter = _props.renderFooter,
renderRow = _props.renderRow,
_props$dataSource = _props.dataSource,
dataSource = _props$dataSource === undefined ? [] : _props$dataSource;
if (children) {
return !Array.isArray(children) ? [children] : children;
}
var header = typeof renderHeader == 'function' ? renderHeader() : null;
var footer = typeof renderFooter == 'function' ? renderFooter() : null;
if (children) {
return !Array.isArray(children) ? [children] : children;
}
var header = typeof renderHeader == 'function' ? renderHeader() : null;
var footer = typeof renderFooter == 'function' ? renderFooter() : null;
var body = dataSource.map(function (i, index) {
return renderRow(i, index);
});
return [].concat(header, body, footer);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var body = dataSource.map(function (i, index) {
return renderRow(i, index);
});
return [].concat(header, body, footer);
var _props2 = this.props,
onEndReached = _props2.onEndReached,
_props2$onEndReachedT = _props2.onEndReachedThreshold,
onEndReachedThreshold = _props2$onEndReachedT === undefined ? 500 : _props2$onEndReachedT,
_props2$loadmoreretry = _props2.loadmoreretry,
loadmoreretry = _props2$loadmoreretry === undefined ? true : _props2$loadmoreretry,
id = _props2.id,
style = _props2.style,
showScrollbar = _props2.showScrollbar,
_props2$_keepScrollPo = _props2._keepScrollPosition,
_keepScrollPosition = _props2$_keepScrollPo === undefined ? false : _props2$_keepScrollPo,
_props2$_autoWrapCell = _props2._autoWrapCell,
_autoWrapCell = _props2$_autoWrapCell === undefined ? true : _props2$_autoWrapCell,
others = _objectWithoutProperties(_props2, ['onEndReached', 'onEndReachedThreshold', 'loadmoreretry', 'id', 'style', 'showScrollbar', '_keepScrollPosition', '_autoWrapCell']);
var children = this.getChidren();
var cells = children.map(function (child, index) {
var ref = 'cell' + index;
if (child && child.type && child.type.displayName === _nukeRefreshControl2.default.displayName) {
_this2.hasHeader = true;
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props2 = this.props,
onEndReached = _props2.onEndReached,
_props2$onEndReachedT = _props2.onEndReachedThreshold,
onEndReachedThreshold = _props2$onEndReachedT === undefined ? 500 : _props2$onEndReachedT,
_props2$loadmoreretry = _props2.loadmoreretry,
loadmoreretry = _props2$loadmoreretry === undefined ? true : _props2$loadmoreretry,
id = _props2.id,
style = _props2.style,
showScrollbar = _props2.showScrollbar,
_props2$_keepScrollPo = _props2._keepScrollPosition,
_keepScrollPosition = _props2$_keepScrollPo === undefined ? false : _props2$_keepScrollPo,
_props2$_autoWrapCell = _props2._autoWrapCell,
_autoWrapCell = _props2$_autoWrapCell === undefined ? true : _props2$_autoWrapCell,
others = _objectWithoutProperties(_props2, ['onEndReached', 'onEndReachedThreshold', 'loadmoreretry', 'id', 'style', 'showScrollbar', '_keepScrollPosition', '_autoWrapCell']);
var children = this.getChidren();
var cells = children.map(function (child, index) {
var ref = 'cell' + index;
if (child && child.type === _nukeRefreshControl2.default) {
_this2.hasHeader = true;
}
if (child) {
if (_autoWrapCell && child.type != _nukeRefreshControl2.default) {
if (child.key) return (0, _rax.createElement)(
_nukeCell2.default,
{ keepScrollPosition: _keepScrollPosition, ref: ref, key: child.key },
child
);else {
return (0, _rax.createElement)(
_nukeCell2.default,
{ ref: ref },
child
);
}
} else {
return (0, _rax.cloneElement)(child, { ref: ref });
}
} else {
return (0, _rax.createElement)(_nukeCell2.default, { ref: ref });
}
});
if (_nukeEnv.isWeex) {
return (0, _rax.createElement)(
'list',
_extends({
id: id,
ref: 'list',
style: style,
onLoadmore: onEndReached,
loadmoreretry: true,
loadmoreoffset: onEndReachedThreshold,
showScrollbar: showScrollbar
}, others),
cells
);
} else {
return (0, _rax.createElement)(
_nukeScrollView2.default,
_extends({}, this.props, { ref: 'list' }),
cells
);
if (child) {
if (_autoWrapCell && child.type && child.type.displayName != _nukeRefreshControl2.default.displayName) {
if (child.key) return (0, _rax.createElement)(
_nukeCell2.default,
{
keepScrollPosition: _keepScrollPosition,
ref: ref,
key: child.key
},
child
);else {
return (0, _rax.createElement)(
_nukeCell2.default,
{ ref: ref },
child
);
}
} else {
return (0, _rax.cloneElement)(child, { ref: ref });
}
} else {
return (0, _rax.createElement)(_nukeCell2.default, { ref: ref });
}
}]);
});
if (_nukeEnv.isWeex) {
return (0, _rax.createElement)(
'list',
_extends({
id: id,
ref: 'list',
style: style,
onLoadmore: onEndReached,
loadmoreretry: true,
loadmoreoffset: onEndReachedThreshold,
showScrollbar: showScrollbar
}, others),
cells
);
} else {
return (0, _rax.createElement)(
_nukeScrollView2.default,
_extends({}, this.props, { ref: 'list' }),
cells
);
}
}
}]);
return ListView;
return ListView;
}(_rax.Component);
ListView.childContextTypes = {
isInARecyclerView: _rax.PropTypes.bool
isInARecyclerView: _rax.PropTypes.bool
};
exports.default = ListView;
module.exports = exports['default'];

10

package.json
{
"name": "nuke-list-view",
"version": "1.0.1",
"version": "1.0.2",
"description": "列表",

@@ -46,9 +46,3 @@ "main": "lib/index",

"nuke-touchable": "^1.x.x",
"nuke-view": "^1.x.x",
"eslint": "3.19.0",
"babel-eslint": "^7.2.3",
"eslint-config-ali": "2.0.0",
"eslint-plugin-import": "2.6.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-react": "7.1.0"
"nuke-view": "^1.x.x"
},

@@ -55,0 +49,0 @@ "publishConfig": {

281

theme/index.jsx
/** @jsx createElement */
import { createElement, PureComponent, Component, render } from 'rax';
import {createElement, Component,render} from 'rax';
import View from 'nuke-view';

@@ -7,158 +7,143 @@ import Text from 'nuke-text';

import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import ListView from 'nuke-list-view';
import Modal from "nuke-modal";
const originalData = [];
for (let i = 0; i < 20; i++) {
originalData.push({ id: i, text: '列表项' });
let listData = [];
for (var i = 0; i < 20; i++) {
listData.push({key: i,text:'第' + i + '条数据'});
}
class ListItem extends PureComponent {
render() {
const { id, text, onPress } = this.props;
return (
<Touchable
id={`cell_${id}`}
style={styles.cellItem}
onPress={() => {
onPress(id);
}}
>
<Text style={styles.itemTextList}>{text}</Text>
</Touchable>
);
}
}
class ListViewDemo extends Component {
constructor() {
super();
this.state = {
data: [...originalData],
isRefreshing: false,
showLoading: true,
refreshText: '↓ 下拉刷新',
};
this.onRefresh = this.onRefresh.bind(this);
this.renderItem = this.renderItem.bind(this);
this.onLoadMore = this.onLoadMore.bind(this);
this.renderHeader = this.renderHeader.bind(this);
this.renderFooter = this.renderFooter.bind(this);
}
constructor() {
super();
this.state = {
data: Object.assign([],listData),
stop: false,
isRefreshing: false,
showLoading:true,
refreshText: '↓ 下拉刷新',
};
this.index = 0;
onItemPress(index) {
console.log(`clicked ${index}`);
}
onRefresh(e) {
this.setState({
isRefreshing: true,
refreshText: '加载中',
});
setTimeout(() => {
this.setState({
isRefreshing: false,
data: [...originalData],
refreshText: '↓ 下拉刷新',
});
}, 1000);
}
}
handleRefresh = (e) => {
this.setState({
isRefreshing: true,
refreshText: '加载中',
});
this.refs.mylist.resetLoadmore();
this.index = 0;
setTimeout(() => {
this.setState({
showLoading:true,
isRefreshing: false,
data: Object.assign([],listData),
refreshText: '↓ 下拉刷新',
});
Modal.toast('Refresh finish');
onLoadMore() {
// 模拟网络加载
setTimeout(() => {
this.state.data.push({
id: 'b100',
text: '新数据',
});
this.setState({
data: this.state.data,
});
}, 300);
}
renderHeader() {
return (
<RefreshControl
style={styles.refresh}
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
>
<Text style={styles.loadingText}>{this.state.refreshText}</Text>
</RefreshControl>
);
}
renderItem(item, index) {
return (
<ListItem id={item.id} text={item.text} onPress={this.onItemPress} />
);
}
renderFooter() {
this.state.showLoading ? (
<View style={[styles.loading]}>
<Text style={styles.loadingText}>加载中...</Text>
</View>
) : null;
}
render() {
const { data } = this.state;
return (
<ListView
renderHeader={this.renderHeader}
renderFooter={this.renderFooter}
renderRow={this.renderItem}
dataSource={data}
style={styles.listContainer}
onEndReached={this.onLoadMore}
/>
);
}
}, 1000);
};
handleLoadMore() {
var self = this;
if (self.index == 5) {
//模拟ajax请求返回数据5次以后，数据不再有更新了
self.setState({showLoading:false})
return;
}else{
//模拟ajax请求返回数据，数据有新增
setTimeout(function() {
self.state.data.push({key: self.index + 'l1',text:'第' + self.index + '次，loadmore 1'}, {key: self.index + 'l2',text:'第' + self.index + '次，loadmore 2'});
self.setState(self.state);
self.index++;
Modal.toast('Loadmore finish');
}, 1000);
}
}
linkTo(item,e) {
console.log(e);
}
renderItem (item, index){
return <Touchable style={app.cellItemList} onPress={this.linkTo.bind(this,item)}>
<Text style={app.itemTextList}>{item.text}</Text>
</Touchable>;
}
renderHeader=()=>{
return <RefreshControl style={app.refresh} refreshing={this.state.isRefreshing} onRefresh={this.handleRefresh}><Text style={app.loadingText}>{this.state.refreshText}</Text></RefreshControl>;
}
renderFooter=()=>{
return this.state.showLoading ?
<View style={[app.loading]}><Text style={app.loadingText}>加载中...</Text></View>
:null
}
render(){
var self=this;
return (
<View style={app.wrapper}>
<ListView
ref="mylist"
renderHeader={this.renderHeader}
renderFooter={this.renderFooter}
renderRow={this.renderItem.bind(this)}
dataSource={this.state.data}
showScrollbar={true}
style={app.listContainer}
onEndReached={this.handleLoadMore.bind(this)}
/>
</View>
)
}
}
const styles = {
listContainer: {
flex: 1,
},
cellItem: {
backgroundColor: '#ffffff',
'backgroundColor:active': '#f2f3f7',
height: '96rem',
flex: 1,
alignItems: 'center',
flexDirection: 'row',
borderBottomWidth: '2rem',
borderBottomStyle: 'solid',
borderBottomColor: '#e6e7eb',
},
icon: {
color: '#c7c7cc',
width: '72rem',
height: '72rem',
marginRight: '26rem',
// position:'absolute',
// top:'34rem',
// right:'24rem'
},
itemTextList: {
fontSize: '32rem',
color: '#5F646E',
},
refresh: {
height: '80rem',
width: '750rem',
backgroundColor: '#cccccc',
justifyContent: 'center',
alignItems: 'center',
},
loading: {
height: '80rem',
display: 'flex',
width: '750rem',
flexDirection: 'row',
backgroundColor: '#cccccc',
alignItems: 'center',
justifyContent: 'center',
},
loadingText: {
color: '#666666',
},
};
const app = {
wrapper:{
flex:1
},
listContainer:{
flex:1
},
cellItemList:{
backgroundColor:"#ffffff",
height:"110rem",
borderBottomWidth:"2rem",
borderBottomStyle:"solid",
borderBottomColor:"#e8e8e8",
paddingLeft:"30rem",
alignItems:"center",
flexDirection:"row"
},
itemTextList:{
fontSize:"30rem",
color:"#5F646E"
},
refresh:{
height:"80rem",
width:"750rem",
render(<ListViewDemo />);
backgroundColor:"#cccccc",
justifyContent:"center",
alignItems:"center"
},
loading:{
height:"80rem",
display:"flex",
width:"750rem",
flexDirection:"row",
backgroundColor:"#cccccc",
alignItems:"center",
justifyContent:"center"
},
loadingText:{
color:"#666666"
}
}
render(<ListViewDemo/>);
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc