为什么这个ListView只显示10个项目?
发布时间:2020-12-15 16:20:47 所属栏目:百科 来源:网络整理
导读:(我知道有一些网站可以分享反应性的例子,但我无法通过谷歌找到它们;“反应原生共享代码”只是提出了共享按钮的代码,同样的“示例” – 什么是一个好网站用于此?) 我有一个listview(感谢这个answer,归功于@ colin-ramsay).我想做的是在每个listview中放入一
(我知道有一些网站可以分享反应性的例子,但我无法通过谷歌找到它们;“反应原生共享代码”只是提出了共享按钮的代码,同样的“示例” – 什么是一个好网站用于此?)
我有一个listview(感谢这个answer,归功于@ colin-ramsay).我想做的是在每个listview中放入一些项目,让它们在容器内部对齐(复选框和同一行上的标签).但我无法做到这一点因为我无法弄清楚为什么这20个项目的数组只显示10个项目. 警报显示20个项目(0-19). 码: import React,{Component} from 'react'; import {View,Text,StyleSheet,ListView} from 'react-native'; var styles = StyleSheet.create({ container:{ marginTop:65,margin:10,backgroundColor:"#DDDDEE" },list:{ height:400,marginTop:40,flexDirection:'row',flexWrap:'wrap',justifyContent:'center',alignItems:'flex-start' },item:{ alignItems:'flex-start',backgroundColor:'red',width:40,height:40,margin:3,padding:3,alignItems:'center' } }); class TestCmp extends Component { constructor(props) { super(props); var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2}); var data = Array.apply(null,{length:20}).map(Number.call,Number); alert(data); this.state = {dataSource:ds.cloneWithRows(data)}; } render() { return ( <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={ (rowData) => { return ( <View style={styles.item}> <Text>{rowData}</Text> </View> ) } }/> ); } } export default class TestPage extends Component { render() { return ( <View style={styles.container}> <TestCmp/> </View> ) } } 其他10件物品怎么了?我已经尝试使用检查器并更改容器的高度,但没有任何工作. 解决方法
ReactNative ListView组件使用
initialListSize属性计算在初始组件装载时要呈现的行数.默认情况下,initialListSize设置为10.
供参考,请参阅ReactNative ListView源代码中的以下功能, var DEFAULT_INITIAL_ROWS = 10; getDefaultProps: function() { return { initialListSize: DEFAULT_INITIAL_ROWS,pageSize: DEFAULT_PAGE_SIZE,renderScrollComponent: props => <ScrollView {...props} />,scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,stickyHeaderIndices: [],}; } 如果你想让ListView默认渲染所有项目,你可以使用ListView组件中的initialListSize属性,如下面的代码 <ListView contentContainerStyle={styles.list} initialListSize={20} dataSource={this.state.dataSource} renderRow={ (rowData) => { return ( <View style={styles.item}> <Text>{rowData}</Text> </View> ) } }/> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |