React-Native 学习ListView和简单布局

listView需要两个关键数据，一个是row或者section的更新策略；一个是需要显示的data数据。
这里使用rowHasChanged和sectionHeaderHasChanged更新策略，也是最常见的策略。

1：在构造函数中创建更新策略和数据

constructor(props) {
        super(props);
        let ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 != r2,
            sectionHeaderHasChanged: (s1, s2) => s1 != s2,
        });
        this.state = {
            datasource: ds,
            data: {'a': ['aaa', 'bbb', 'ccc', 'ddd'], 'b': ['eee', 'fff', 'www', 'rrr']},
        }
    }

2：在创建listView的时候使用更新策略和数据源数据

//创建listview界面
//dataSource定义了策略和数据
//renderRow定义行显示的view
    contantView = () => {
        return(
            <ListView style={styles.listViewStyle}
                      dataSource={this.state.datasource.cloneWithRowsAndSections(this.state.data)}
                      renderRow={(rowData, sectionId, rowId) => this.decideRowSectionView(rowData, sectionId, rowId)}
            />
        )
    };

3：以下为renderRow显示的view

//判断显示row和section
    decideRowSectionView = (rowData, sectionId, rowId) => {
        if (upSectionId != sectionId) {
            upSectionId = sectionId;
            return(
                this.sectionView(rowData, sectionId, rowId)
            )
        }else {
            return(
                this.rowView(rowData, sectionId, rowId)
            )
        }
    };
    //创建row显示的view
    rowView = (rowData, sectionId, rowId) => {
        return(
            <View style={styles.rowViewStyle}>
                <Image style={styles.rowViewImageStyle}
                       source={{uri: '/Users/kk/SampleAppMovies/image/a11.jpg'}}
                />
                <Text style={styles.rowViewTextStyle}>
                    {'当前数据' + rowData + ' sectionId ' + sectionId + ' rowId ' + rowId}
                </Text>
            </View>
        )
    };
    //创建section显示的view
    //不能使用float属性，这里用了ScrollView来限定Text的显示
    sectionView = (rowData, sectionId, rowId) => {
        return(
            <View style={styles.sectionViewStyle}>
                <View style={styles.sectionUpViewStyle}>
                    <Image style={styles.rowViewImageStyle}
                           source={{uri: '/Users/kk/SampleAppMovies/image/c11.jpg'}}
                    />
                    <ScrollView style={styles.sectionScrollViewStyle}>
                        {<Text>千里莺啼绿映红，水村山郭酒旗风。南朝四百八十寺，多少楼台烟雨中。</Text>}
                    </ScrollView>
                </View>
                <Text style={styles.rowViewTextStyle}>
                    凤凰台上凤凰游，凤去台空江自流。吴宫花草埋幽径，晋代衣冠成古丘。三山半落青天外，二水中分白鹭洲。总为浮云能蔽日，长安不见使人愁。
                    人生若只如初见，何事秋风悲画屏。等闲变却故人心，却道故人心易变。骊山雨露清宵半，泪雨零铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。
                </Text>
                {this.rowView(rowData, sectionId, rowId)}
            </View>

        )
    };

4：使用的style

const styles = StyleSheet.create({
    rowViewStyle: {
        flex: 1,
        backgroundColor: '#1faadd',
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomWidth: 0.5,
        borderBottomColor: '#000000',
    },
    rowViewImageStyle: {
        width: 40,
        height: 44,
    },
    rowViewTextStyle: {
        fontSize: 14,
        marginLeft: 10,
    },
    sectionViewStyle: {
        flex: 1,
        backgroundColor: '#afaadd',
    },
    sectionUpViewStyle: {
        flex: 1,
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#6f5afd',
        borderBottomWidth: 0.1,
        borderBottomColor: '#a01010',
    },
    sectionScrollViewStyle: {
        margin: 10,
    },
    listViewStyle: {
        flex: 1,
        marginTop: 20,
    },
    rendViewStyle: {
        flex: 1,
    }
});

最终效果：

57B99D17-8F41-4230-B59D-06A27607B90C.png