react listview篇-1

listview 加载简单页面代码如下:

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    StyleSheet,
    ActivityIndicator,
    ListView,
    TouchableOpacity


} from 'react-native';


// var arrayData;

//由于使用未定义的TextView控件导致渲染问题
class MainPage extends React.Component {

    constructor(props) {
            super(props);
            var ds = new ListView.DataSource({
                rowHasChanged: (r1, r2) => {
                    return r1 != r2;
                }


            });
            this.state = {
                arrayListData: [],
                dsData: ds,
                testCode: '1',
                //一、listview 初始化数据源
                dataSource: ds.cloneWithRows([])
            };
            //使用state中数据一定注意  添加this.state前缀 dataSource ={this.state.dataSource}，否则报出 evaluatding dataSource.rowIdentities


            //二、进行listview的下拉刷新和上拉加载更多监听设置
            this.renderItem = this.renderItem.bind(this);
            this.renderFooter = this.renderFooter.bind(this);

        }
        // <Text style = {styles.container} onPress = {this.goToChat.bind(this)}>
        //  主界面 + {this.state.testCode}
        // </Text>

    //Let { bar, foo} = {foo:”aaa”,bar:”bbb”}; 
    // 上面这种方式，默认 属性名和变量名一致
    // Let { log,sin,cos} = Math;将Math对象的 对数 正弦 余弦三个方法，赋值到对应的变量上

    initDataSource() {
        var arrayData = new Array();
        // var data = this.state.arrayListData;
        for (let i = 0; i < 10; i++) {
            // this.state.dataSource.cloneWithRows("内容" + i);
            arrayData.push("内容" + i);
        }
        // this.state.dataSource.cloneWithRows(arrayData);
        this.setState({
            dataSource: this.state.dsData.cloneWithRows(arrayData)
        });
    }

    render() {
        return (
            <View  style = {styles.container} >
            <View style = {styles.containerrow}>
            <Text style = {styles.containerText} onPress = {this.initDataSource.bind(this)}>
                 主界面 + {this.state.testCode}
            </Text>
            </View>
            < ListView style = {styles.listView}

            dataSource = {
                this.state.dataSource

            }
            renderRow = {
                this.renderItem.bind(this)
            }
            onEndReached = {
                () => this.onEndReached()
            }
            onEndReachedThreshold = {
                10
            }
            renderFooter = {
                () => this.renderFooter()
            }
            pageSize = {
                15
            }
            />
    </View>
        );
    }

    //ListView
    renderFooter() {
        return (
            <View style={styles.footerContainer}>
          <ActivityIndicator size="small" color="#3e9ce9" />
          <Text style={styles.footerText}>
            数据加载中……
          </Text>
          </View>
        );
    }

    renderItem(article, sectionID, rowID) {

        return (
            <TouchableOpacity onPress={() => this.onPress(article) } style ={styles.listViewopa}>
          <View style={styles.containerItem}>
               <Text style ={styles.itemRightContent}
               >{article}</Text>
          </View>
        </TouchableOpacity>
        );


    }


    onPress(itemData) {
        alert(itemData);
    }

    onEndReached(typeId) {
        // currentLoadMoreTypeId = typeId;
        // const time = Date.parse(new Date()) / 1000;
        // const index = this.state.typeIds.indexOf(typeId);
        // if (index < 0) {
        //   return;
        // }
        // if (time - loadMoreTime > 1) {
        //   pages[index] += 1;
        //   const { readActions } = this.props;
        //   readActions.requestArticleList(false, false, typeId, true, pages[index]);
        //   loadMoreTime = Date.parse(new Date()) / 1000;
        // }
    }



    // goToChat() {

    //      this.props.navigation.navigate('Chat', {
    //          chatName: 'fromMainPage',
    //           getResult:function(myMessage){
    //                        this.setState({
    //                            testCode:myMessage,
    //                        })
    //                    }
    //      })
    //  }
    goToChat() {

        this.props.navigation.navigate('ChatDrawer', {
            chatName: 'fromMainPage',
            getResult: function(myMessage) {
                this.setState({
                    testCode: myMessage,
                })
            }
        })
    }

}

//由于外层布局  设定 center导致  listview无法填充情况横向距离，，且listview无法使用  justifyContent和alignItems
// justifyContent: 'center',
// alignItems: 'center'   
const styles = StyleSheet.create({

    container: {
        flexDirection: 'column',
        backgroundColor: '#ababab',
        flex: 1,
    },
    containerrow: {
        flexDirection: 'row',
        backgroundColor: '#ababab',
        justifyContent: 'center',
        alignItems: 'center'
    },
    containerrowListview: {
        flexDirection: 'column',
        backgroundColor: '#ababab',
        justifyContent: 'center',
        alignItems: 'center'
    },
    containerText: {
        backgroundColor: '#cdcdcd',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    containerItem: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fcfcfc',
        borderBottomColor: '#dddd',
        borderBottomWidth: 1
    },

    listView: {
        flexDirection: 'column',
        flex: 1,
        backgroundColor: '#eeeeec'

    },

    listViewopa: {

        flex: 1,
        backgroundColor: '#999999'

    },
    footerText: {

        textAlign: 'center',
        fontSize: 16,
        marginLeft: 10
    },
    footerContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 5
    },
    itemRightContent: {
        flex: 1,
        flexDirection: 'column'
    }

});


// module.exports = MainPage;
export default MainPage;
// export class MainPage;

注意内容
1、listview外部container容器 影响其布局，外部设置为 垂直居中justifyContent center，水平居中alignItems center时候，会导致listview无法填充横向宽度
2、
初始定义 1.1var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => {
return r1 != r2;
}
});
//注意setState中内容变化可以触发 render函数
listview动态加载内容this.state中
定义并初始化变量 dsData：ds,
定义并初始化数据源变量 dataSource ：ds.cloneWithRows([])
并可以在点击事件等触发 setState{dataSource： ds.cloneWithRows(数组数据)}