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
