爱凉拌菜真是太好了

react-native学习日记之ListView

发表于

react-native ListView DOC

ListView 基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//es5 写法
var ListViewDemo = React.createClass({
  getInitialState() {
    // 设置初始值
    // 1.1 设置数据源
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    // 1.2 设置返回数据
    return {
      //listData 为一个数组格式
      dataSource: ds.cloneWithRows(listData)
    }
  },
  // 设置render函数
  render() {
    return (
      <ListView dataSource={this.state.dataSource}
        renderRow={this.renderListView}
        //this.renderListView后不加括号表示默认接受所有参数（owData，sectionID...)
        />
    );
  },
  renderListView(owData, sectionID, rowID, highlightRow) {
    //renderRow 回调函数
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//es6 写法
class MyComponent extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(listData),
    };
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderListView}
      />
    );
  }
}

完整demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
  Alert
} from 'react-native';
var listData = [
  {
    src:'a', desc:'第一张'
  },
  {
    src:'b', desc:'第二张'
  },
  {
    src:'c', desc:'第三张'
  },
  {
    src:'d', desc:'第四张'
  },
  {
    src:'e', desc:'第五张'
  },
  {
    src:'b', desc:'第二张'
  },
  {
    src:'c', desc:'第三张'
  },
  {
    src:'d', desc:'第四张'
  },
  {
    src:'e', desc:'第五张'
  }
];
var ListViewDemo = React.createClass({
  getInitialState() {
    // 设置初始值
    // 1.1 设置数据源
    var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});
    // 1.2 设置返回数据
    return {
      dataSource: ds.cloneWithRows(listData)
    }
  },
  // 设置render函数
  render() {
    return (
      <ListView dataSource={this.state.dataSource}
        renderRow={this.renderListView}
        renderSeparator={(sectionID, rowID, adjacentRowHighlighted)=>{
          return (
            <View key={`${sectionID}-${rowID}`}
              style={{height:1,backgroundColor:adjacentRowHighlighted?'blue':'red'}}
              ></View>
          );
        }}
        />
    );
  },
  // renderRow的回调函数
  renderListView(owData, sectionID, rowID, highlightRow) {
    return (
      <TouchableOpacity activeOpacity={0.5} onPress={()=>highlightRow(sectionID,rowID)}>
        <View style={styles.cellViewStyle}>
          {/*左边的图片src*/}
          <Image source={{uri:owData.src}} style={{width:100,height:100,marginRight:15,borderRadius:50}}/>
          {/*右边的图片描述desc*/}
          <View style={styles.descStyle}>
            <Text>
              {owData.desc}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
})
const styles = StyleSheet.create({
  cellViewStyle: {
    // borderBottomWidth: 1,
    // borderBottomColor: '#eeeeee',
    flexDirection:'row',
  },
  descStyle: {
    flexDirection:'row',
    alignItems:'center'
  }
});
AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);

运行效果

初始状态。

onPress触发后

注意

cloneWithRows接受一个数组

renderRow，hightlightRow & renderSeparator

renderRow 的回调函数可以接受4个参数，分别是数据，区块id，行id，highlightRow回调函数
其中hightlightRow的用法文档里面写的不是很明白。搜了一下，发现是这样用的
http://stackoverflow.com/questions/36000842/how-do-i-call-highlightrow-of-listview-renderrow

大致过程是这样的，如果触发了hightlightRow(sectionID,rowID)函数，则会将该sectionID，rowID相应的单元行的标记为highlighted。而renderSeparator会检查每一个row的相邻row的highlight情况，也就是adjacentRowHighlighted 的真假。adjacentRowHighlighted默认为false

文档对renderSeparator的解释

renderSeparator function #
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。

(sectionID, rowID, adjacentRowHighlighted) => renderable
If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted.

1
2
3
<View key={`${sectionID}-${rowID}`}
  style={{height:1,backgroundColor:adjacentRowHighlighted?'blue':'red'}}
></View>

这块代码表示了当adjacentRowHighlighted为true时，该view（分割线）的颜色为蓝色。

另外

http://wiki.jikexueyuan.com/project/react-native/image.htm

1
<Image source={{uri:...}}/>

中的uri的用法