2016-04-06 20:27:05 qq_27275015 阅读数 2411
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

对于android,react-native-viewpager这个第三方实现商品展示很好用
<ViewPager
dataSource={this.state.adDataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true} />

开始我想给商品添加点击事件,直接在ViewPager外包裹TouchableOpacity,发现点击事件和滑动事件直接冲突,处理方法如下:
renderPage方法返回单个视图的渲染,于是我们可以在这个方法里的图片外添加点击事件

_renderPage(data: Object) {
        return (
            <TouchableOpacity  onPress={() => this.viewPagerCheck()}>
                <Image style={styles.viewPager_ad} source={{uri: data}}/>
            </TouchableOpacity>
        );
    }

这时发现只要点击就一直报错,原来我们还需要绑定这个方法才能实现,在构造方法里添加this._renderPage = this._renderPage.bind(this); 这样就绑定了:

// 构造
      constructor(props) {
        super(props);
          this._renderPage = this._renderPage.bind(this);
          var dataSource = new ViewPager.DataSource({
              pageHasChanged: (p1, p2) => p1 !== p2,
          });
        // 初始状态
        this.state = {
                adDataSource:     dataSource.cloneWithPages(IMGS)
        };
      }
2018-09-07 00:12:53 qq_23414675 阅读数 525
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

React Native实现仿天猫商品类目列表

前段时间在群里有人问我,类似天猫类目分类这种列表怎么实现,其实这个类目不算复杂,只要清楚这两个列表之间的关系,选择好相应的组件,开发起来还是挺简单的,只是在开发中也有几个需要注意的小细节处理

效果图预览

gif

Demo地址

https://github.com/guangqiang-liu/react-native-categoryListDemo

注意事项

  • 根类目点击时,当类目列表超过一屏时,需要滚动到列表的顶部,并且也需要将右边的分类列表滚动到顶部,天猫的目录就是这种效果
  • 控制页面的渲染时机,如果数据量很大,建议单独做些优化
  • FlatList和SectionList数据源的组装
  • 列表偏移量处理

核心源码

<FlatList
          ref={flatList => this._flatList = flatList}
          data={data}
          ListHeaderComponent={() => (<View/>)}
          ListFooterComponent={() => (<View/>)}
          ItemSeparatorComponent={() => <View style={{height:1, backgroundColor:'#F5F5F5'}}/>}
          renderItem={this._renderItem}
          onEndReachedThreshold={20}
          showsVerticalScrollIndicator={false}
          >
        </FlatList>
<SectionList
          ref={(ref) => this._sectionList = ref}
          renderSectionHeader={this.sectionComp}
          renderItem={(data) => this.renderItem(data)}
          sections={tempArr}
          ItemSeparatorComponent={() => <View/>}
          ListHeaderComponent={() => <View/>}
          ListFooterComponent={() => <View/>}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => 'key' + index + item}
        />
// 设置列表的偏移量
_renderItem = item => {
    let index = item.index
    let title = item.item.title
    return (
      <TouchableOpacity
        key={index}
        style={[{alignItems: 'center', justifyContent: 'center', width: 100, height: 44}, this.state.selectedRootCate === index ? {backgroundColor: '#F5F5F5', borderLeftWidth: 3, borderLeftColor: 'red'} : {backgroundColor: 'white'}]}
        onPress={() => {
          (CateData.data.length - index) * 45 > height - 65 ? this._flatList.scrollToOffset({animated: true, offset: index * 45}) : null
          this._sectionList.scrollToLocation({itemIndex: 0, sectionIndex: 0, animated: true, viewOffset: 20})
          this.setState({selectedRootCate: index})
        }}
      >
        <Text style={{fontSize: 13, color: this.state.selectedRootCate === index ? 'red' : '#333'}}>{title}</Text>
      </TouchableOpacity>
    )
  }

更多文章

  • 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(*620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!*

小伙伴们扫下方二维码加入RN技术交流QQ群

QQ群二维码,500+ RN工程师在等你加入哦

2019-03-25 19:40:21 NiuAGeNiuC 阅读数 47
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁
import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'

class Goodmoring extends Component{  //定制化组件
  static defaultProps={
    name:"somebody",
  };
  
  render(){
    return (
    <View >
        <Text style={styles.welcome} >
        Good morning,Wang!{this.props.name}
        </Text>
    </View>
    )
  }
  
}


class App extends Component {  
  render() {
 
    return (
   //定制化组件使用
      <View style={styles.container}>
          <Goodmoring style={styles.welcome} name="哒哒"  />
        <Text style={styles.welcome}>
        wanghuanlong
        </Text>  
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 5,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

 

2017-12-28 15:21:24 IT_luntan 阅读数 3396
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

接上一篇博客导航器框架实现基础上实现分组列表;
简述:ReactNative在0.43.0版本中开始推出SectionList,RN高性能的分组(section)列表组件,支持下面的这些常用功能:

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。

如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。
在0.43版本中,如果希望section的头部能够吸顶悬浮,请暂时先使用老版的<ListView>。下一个版本开始可以支持悬浮的section头部。
想要了解更多的SectionList可以参考RN官网,点击此处!
目录
1、SectionList简述
2、SectionList常用属性和方法
3、SectionList示例,通讯录实现以及源码
正文
1、SectionList常用属性和方法
属性集合
这里写图片描述
方法集合
这里写图片描述

2、SectionList示例,二级列表展开、收缩功能实现及源码
源码,可直接复制修改使用:
这里写图片描述
这里写图片描述
这里写图片描述

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Button,
    SectionList
} from 'react-native';
// 初始化总数据
var AllArr=[
    {name:'食品生鲜',citys:[{name:'螃蟹'},{name:'龙虾'},{name:'车厘子'},{name:'百香果'},{name:'草莓'}]},
    {name:'家用电器',citys:[{name:'超薄电视'},{name:'空调'},{name:'机器人'},{name:'洗衣机'},{name:'取暖器'}]},
    {name:'手机数码',citys:[{name:'手机'},{name:'单反相机'},{name:'音响'},{name:'智能手环'},{name:'平板'}]},
    {name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
    {name:'美妆个护',citys:[{name:'面膜'},{name:'防晒'},{name:'口红'}]},
    {name:'奢侈品',citys:[{name:'LV箱包'},{name:'饰品'},{name:'钻石'},{name:'瑞士手表'}]},
    {name:'全球购',citys:[{name:'全世界'},{name:'都'},{name:'是'},{name:'中国'},{name:'的'}]},
];

export default class CityJiNan extends Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        headerTitle: `${navigation.state.params.login_title}`,
    });


    constructor(props) {
        super(props);
        this.state = {
            //改变数据的数组
            Arr:[
                {name:'食品生鲜',citys:[{name:'螃蟹'},{name:'龙虾'},{name:'车厘子'},{name:'百香果'},{name:'草莓'}]},
                {name:'家用电器',citys:[{name:'超薄电视'},{name:'空调'},{name:'机器人'},{name:'洗衣机'},{name:'取暖器'}]},
                {name:'手机数码',citys:[{name:'手机'},{name:'单反相机'},{name:'音响'},{name:'智能手环'},{name:'平板'}]},
                {name:'吉林省',citys:[{name:'长春市'},{name:'吉林市'},{name:'四平市'},{name:'辽源市'},{name:'通化市'}]},
                {name:'美妆个护',citys:[{name:'面膜'},{name:'防晒'},{name:'口红'}]},
                {name:'奢侈品',citys:[{name:'LV箱包'},{name:'饰品'},{name:'钻石'},{name:'瑞士手表'}]},
                {name:'全球购',citys:[{name:'全世界'},{name:'都'},{name:'是'},{name:'中国'},{name:'的'}]},
            ]
        };
        //for循环添加字段删除字段添加标示和key
        for (var i = 0; i < this.state.Arr.length; i++) {
            this.state.Arr[i]['data'] = [];
            this.state.Arr[i]['key'] = i;
            this.state.Arr[i]['isShow'] = 'off';
            delete this.state.Arr[i]['citys'];

        }
    }

    //分组创建的cell
    Cell(data){
        return(
            <View style={{height:40,backgroundColor:'green',justifyContent: 'center',}}>
                <View style={{height:39,backgroundColor:'pink',justifyContent: 'center',}}>
                    <Text>{data.item.name}</Text>
                </View>
            </View>
        );
    }
    // 展开改变数据源,增加数据,合上删除数组里的数据,根据isShow状态判断
    show(data){
        if (data.isShow==='off') {
            this.state.Arr[data.key]['data'] = AllArr[data.key].citys;
            this.state.Arr[data.key]['isShow'] = 'on';
            this.setState({
                Arr:this.state.Arr,
            });
        }else{
            this.state.Arr[data.key]['data'] = [];
            this.state.Arr[data.key]['isShow'] = 'off';
            this.setState({
                Arr:this.state.Arr,
            });
        }

    }
    //列表分组的header
    Header({section}){
        return(
            <TouchableOpacity style={{height:50,
                backgroundColor:'wheat',
                justifyContent: 'center',}}
                              onPress={()=>{this.show(section)}}>
                <View>
                    <Text style={{fontSize:20}}>{section.name}</Text>
                </View>
            </TouchableOpacity>
        );
    }
    //去除警告
    extraUniqueKey(item,index){
        return index+item;
    }
    render() {
        console.log('========'+JSON.stringify(this.state.Arr));
        return (
            <View style={styles.container}>
                <SectionList
                    sections={this.state.Arr}//数据源
                    renderItem={this.Cell.bind(this)}//cell绑定时间创建cell
                    keyExtractor = {this.extraUniqueKey}//去除警告
                    renderSectionHeader={this.Header.bind(this)}//Header绑定时间创建表头
                    scrollEnabled={true}//默认是true,false禁止滚动

                >
                </SectionList>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

SectionList的使用就暂且到这里了!

2017-04-12 11:11:30 JLhaoran 阅读数 3111
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

1.为了测试用的是本地图片,首先图片资源集成到项目中。

这里是android适配的项目 将图片资源放置在下面 通过json 方式访问

项目名称\android\app\src\main\res\drawable

文件   NewWine.json

{
  "data":[
       {
            "image": "gujing",
            "money": "102",
            "name": "古井贡酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "jiangxiaobai",
            "money": "103",
            "name": "江小白酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "jigongshan",
            "money": "104",
            "name": "鸡公山酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "jiumenkou",
            "money": "105",
            "name": "九门口酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "langjiu",
            "money": "106",
            "name": "郎酒酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "maotai",
            "money": "107",
            "name": "茅台酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "shede",
            "money": "108",
            "name": "舍得历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "tianzhilan",
            "money": "109",
            "name": "天之蓝历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "xifeng",
            "money": "110",
            "name": "西风酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "xijiu",
            "money": "111",
            "name": "习酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "zhanggong",
            "money": "112",
            "name": "张弓酒历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        },
        {
            "image": "zhangyu",
            "money": "113",
            "name": "张裕历史悠久产于有悠久历史酒文化的古井村谁知道好喝不好喝谁喝谁知道茅台文化村"
        }
  ]
}
2.listViewDemo.js 界面  主意红色部分 如果不用初始化指定 会报错,应该是this对象改变了在回调方法里

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  ListView,
  Image,
  Text,
  View
} from 'react-native';


import BadgeData from "./BadgeData.json";
import NewWine from "./NewWine.json";

let Dimensions = require("Dimensions");
let {width} = Dimensions.get('window');

export default class listViewDemo extends Component {
  
  constructor(props){
    super(props);
    //1.设置数据源
     let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     //2.设置返回数据
    //  this.state = {dataSource:ds.cloneWithRows(Wine.data)};
    this.state = {dataSource:ds.cloneWithRows(NewWine.data)};
    thiz = this;
  }

  render() {
    return (
    <ListView
     dataSource={this.state.dataSource}
     renderRow={this._renderRow}
    />
    );
  }

  _onItemPress(e){
    let num = 0;
    if(Number.isFinite(e)==false){
      num = Number.parseInt(e)+1;
    }else{
      num = e+1;
    }
    console.log(">>>点击第 "+num+" 行");
  }

  _renderRow(rowData, sectionID, rowID, highlightRow){
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={()=>{thiz._onItemPress(rowID)}}>
      <View style={styles.cellViewStyle}>
        <Image source={{uri: rowData.image}} style={styles.leftImageStyle} />
        <View style={styles.rightViewStyle}>
          <Text style={styles.topTitleStyle}>{rowData.name}</Text>
          <Text style={styles.bottomTitleStyle}>{rowData.money}</Text>
        </View>
      </View>
      </TouchableOpacity>
    );
  }


  
}

const styles = StyleSheet.create({
  cellViewStyle:{
    padding:10,
    backgroundColor: 'white',
    borderBottomWidth:0.5,
    borderBottomColor:"#e8e8e8",
    flexDirection:'row',
  },
  leftImageStyle:{
    marginRight:15,
    width:60,
    height:60
  },
  rightViewStyle:{
   justifyContent:"center",
   width:width*0.8,
  },
  topTitleStyle:{
   color:"red",
   fontSize:20,
  },
  bottomTitleStyle:{
   color:"blue",
   fontSize:20,
  }


});



代码链接:http://pan.baidu.com/s/1o7NBJF8 密码:1l9y

没有更多推荐了,返回首页