温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

React-Native组件之ListView

发布时间:2020-07-04 09:56:25 来源:网络 阅读:1749 作者:lb沫 栏目:开发技术
在使用dataSource时,我们需要先new一个dataSource对象
constructor(){
        super();
        this.state = {
            movies:new ListView.DataSource({
                rowHasChanged:(row1,row2) => row1 !== row2
            })
        }
        this.fetchData();   //豆瓣json   https://api.douban.com/v2/movie/top250
    };
1.getRowData(dataBlob, sectionID, rowID):表明我们将以何种方式从dataBlob(数据源)中提取出rowData,
sectionID用于指定每一个section的标题名(在renderRow,renderHeader等方法中会默认拆开并作为参数传入)

2.getSectionHeaderData(dataBlob, sectionID):表明我们将以何种方式从dataBlob(数据源)中提
取出HeaderData。HeaderData用于给每一个sectionHeader赋值

3.rowHasChanged(prevRowData, nextRowData):指定我们更新row的策略,一般来说都是prevRowData和
nextRowData不相等时更新row

4.sectionHeaderHasChanged(prevSectionData, nextSectionData):指定我们更新sectionHeader的策略,
一般如果用到sectionData的时候才指定

fetchData(){
          data ='username='+user;
          fetch(REQUEST_URL,
            {
              method: 'POST',
              headers: {
                    'Accept':'application/json',
                    'Content-Type':'application/x-www-form-urlencoded'
                        },
              body: data
            })

          .then((response) => response.json()) //把response转为json
          .then((responseData) => {
            this.setState({
                      movies:this.state.movies.cloneWithRows(responseData.subjects)
                  })
          })
          .catch((error)=> {
              alert(error);
          })
      };

renderMovieList(movie){
      return(
          <View>
            <View  style={styles.itemContent}>
              <Text onPress={() => this._gotoSubClass(movie.Sn) } style={styles.itemHeader}>
                {movie.title}
              </Text>
            </View>
          </View>
      );
}

//render两种写法 一
render() {
    return(
      <View style={styles.container}>
        <ListView
                dataSource={this.state.movies}
                renderRow={
                  this.renderMovieList.bind(this)   //上边自定义方法
                }
         />
      </View>
    );
  }

//render两种写法 二
  render() {
    return(
      <View style={styles.container}>
        <ListView
                dataSource={this.state.movies}
                renderRow={(movieData) => <Text>{movieData.title}</Text>}
                />

      </View>
    );
  }

附一篇简书很好的文

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI