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

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

    57472 人正在学习 去看看 李宁

接上一篇博客导航器框架实现基础上实现分组列表;
简述: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-03-12 18:15:28 shakdy 阅读数 4383
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

react native开发:实现点击左侧选择项,右侧显示内容的功能

需求:

界面分为左右两部分,左侧为选择栏,右侧为显示的内容,点击左侧选择项,右侧显示内容的功能
如下图:
这里写图片描述

这里写图片描述

思路:

首先思考问题:

****1. 如何实现左侧栏,点击组件改变颜色?
2. 如何实现点击左侧选项,右侧显示想要内容?

如何实现左侧栏,点击组件改变颜色?

在style中通过条件判断改变样式

如何实现点击左侧选项,右侧显示想要内容?

将左侧被选中的标识,作为参数,通过props回调父组件的方法,该回调方法根据左侧标识,在右侧显示对应的内容

代码

左侧选择栏SettingMenu.js


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Dimensions,
  ScrollView,
  Text,
  TouchableOpacity,
  Image,
  View,

} from 'react-native';

const window = Dimensions.get('window');


export default class SettingMenu extends Component {


  constructor(props) {
    super(props);

    this.state = {
      itemSelected: '通讯方式',
    };
    this._onClickItem = this._onClickItem.bind(this);

  }


  render() {


    return (
      <ScrollView style={styles.contantStyle}
        showsVerticalScrollIndicator={false}>

        {/*选项菜单*/}
        {this._selectItem('通讯方式')}
        {this._selectItem('设置3G服务IP地址')}
        {this._selectItem('交易地点')}
        {this._selectItem('清空考勤记录')}
        {this._selectItem('初始化设备')}
        {this._selectItem('修改密码')}
        {this._selectItem('关于我们')}
        {this._selectItem('退出')}

      </ScrollView>
    );
  }
  _selectItem(item) {
    return (
      <TouchableOpacity style={styles.itemTextView}
        onPress={() => {
          this._onClickItem(item)
        }}>

        <Text style={[
          styles.itemDefaultColor,
          this.state.itemSelected === item && styles.itemSelectedColor
        ]}  >
          {item}
        </Text>

      </TouchableOpacity>
    )
  }
  _onClickItem(itemTextContant) {
    this.setState({
      itemSelected: itemTextContant,
    });
    //传递数据到右边显示组件
    this.props.onItemSelected(itemTextContant);
  }


};


const styles = StyleSheet.create({

  contantStyle: {
    backgroundColor: 'white',
  },
  itemTextView: {
    height: 60,
    width: window.width / 4,
    justifyContent: 'center',
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
    marginLeft: 10,
    marginRight: 10,

  },
  item: {
    fontSize: 16,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },
  itemDefaultColor: {
    color: 'gray',
  },
  itemSelectedColor: {
    color: '#00bfff'
  }
});

父组件Setting.js

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    TextInput,
    Image,
    Dimensions,
    View,
    Modal,
    Button,
    PixelRatio,
    TouchableOpacity,
} from 'react-native';
import NavigationBar from 'react-native-navbar';

import LeftMenu from './SettingMenu.js';//导入 菜单 组件


const window = Dimensions.get('window');


export default class Setting extends Component {
    constructor(props) {
        super(props);
        this.state = {

            selectedItem: '通讯方式',
            showRightContant: '通讯方式',

        };


        this._onMenuItemSelected = this._onMenuItemSelected.bind(this);


    }

    render() {

        return (
            <View style={styles.flex}>

                {/*标题栏*/}
                <NavigationBar tintColor='#00bfff' title={{ title: '设置', tintColor: 'white' }} />

                {/*内容*/}
                <View style={[styles.container, styles.flexDirection]}>
                    {/*左侧选择栏*/}
                    <View style={styles.leftMenuStyle}>
                        <LeftMenu onItemSelected={this._onMenuItemSelected} />
                    </View>
                    {/*右侧显示内容*/}
                    <View style={styles.rightContantSyle}>

                        <Text>{this.state.showRightContant}</Text>
                    </View>
                </View>

            </View>
        );
    }

    _onMenuItemSelected(leftContant) {
        this.setState({
            showRightContant: leftContant,
        });

    }
}

const styles = StyleSheet.create({

    flex: {
        flex: 1,
    },
    flexDirection: {
        flexDirection: 'row',
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    leftMenuStyle: {

        borderRightColor: 'grey',
        borderRightWidth: 1,
    },
    rightContantSyle: {
        flex: 1,

    },

    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',

    },

});
2017-07-12 22:08:29 jiangfei009003 阅读数 468
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

之前的文章讲述了在RN项目中如何使用NavigationBar,如何调用原生模块,以及集成下拉刷新和上拉加载更多的功能,今天介绍一个第三方插件react-native-tab-navigator,讲述我是如何使用它在RN项目中使用TabBar

项目源码在这里

  1. 安装插件

     npm install react-native-tab-navigator --save
  2. 使用

    就我的demo来说:
    Demo中包含了Navigator管理的一系列视图,我尝试过使用一个Tab管理多个由Navigator管理的一系列视图
    (这跟我之前的iOS开发经验有关,在iosApplication的根视图是TabBarController,这个TabBarController管理多个由NavigationController管理的一系列ViewController

    但是这有一个问题:

    场景切换的时候可能有隐藏TabBar的需求,按照刚才说的方法,我需要set一个值来控制tabbar的heightoverflow,又由于component的生命周期函数中没有类似于iOS中-(void)viewWillAppear;的方法,所以没有很好的方法把隐藏的tabbar再显示出来(如果你有解决这个问题的方法,请告诉我)。

    那么换一种思路:

    把管理一系列视图的Tab交由一个Navigator管理,虽然这样违背了iOS开发的普通思路,但是就目前在RN项目中,没有发现太大的问题(有一个问题是只有一级页面显示TabBar,所有二级页面全部不显示,不过就国内大多数应用设计风格来看,这个问题也不算是问题)。

  3. React-native-vector-icons
    这是一个图标库,有兴趣话可以去这里深入了解,简单使用请执行下边两条命令即可

     $ npm install react-native-vector-icons --save
     $ rnpm link

    使用:

     import Icon from 'react-native-vector-icons/Ionicons';
     <Icon name={ 'ios-home' }
  4. 关键部分代码

     //root.js
     import React from 'react'
     import {
         Navigator
     } from 'react-native';
     import { Provider } from 'react-redux'
     import configureStore from './store/store.js'
     import App from './containers/app.js'
     const store = configureStore();
    
     class Root extends React.Component {
         render() {
             return (
                 <Provider store={ store }>
                     //在原来<App />的基础上添加Navigator
                     <Navigator 
                         initialRoute={{ component: App }}
                         configureScene={(route) => {
                             return Navigator.SceneConfigs.FloatFromRight;
                         }}
                         renderScene={(route, navigator) => {
                             let Component = route.component;
                             return <Component {...route.params} navigator={navigator} />
                         }} />
                 </Provider>
             );
         }
     }
     export default Root;
    
     //----------------------
     //app.js  ( render(){} ) 
    
     render() {
         const { reducer } = this.props;
         console.log("============",reducer.tabbarHeight);
         return (
             <TabNavigator tabBarStyle={{ backgroundColor:'white' }} style={{backgroundColor: 'white'}}>
                    <TabNavigator.Item
                     title="主页"
                     selected={this.state.selectedTab === 'home'}
                     renderIcon={() => <Icon name={ 'ios-home' } size={30} color={'gray'}/>}
                     renderSelectedIcon={() => <Icon name={ 'ios-home' } size={30} color={'#4E78E7'}/>}
                     onPress={() => this.setState({ selectedTab: 'home' })}>
                     <ProductListContainer {...this.props} />
                 </TabNavigator.Item>
                 <TabNavigator.Item
                     title="其他"
                     selected={this.state.selectedTab === 'other'}
                     renderIcon={() => <Icon name={ 'ios-more' } size={30} color={'gray'}/>}
                     renderSelectedIcon={() => <Icon name={ 'ios-more' } size={30} color={'#4E78E7'}/>}
                     onPress={() => this.setState({ selectedTab: 'other' })}>
                     <OtherContainer {...this.props}/>
                 </TabNavigator.Item>
             </TabNavigator>
         );
     }
  5. 效果图

2019-06-30 00:20:00 weixin_30682415 阅读数 35
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

问题描述:

react-native-scrollable-tab-view叠加react-native-scrollable-tab-view再加上FlatList
FlatList向下拉时,会造成上一级的react-native-scrollable-tab-view插件的内容左右滑动,进而FlatList的下拉滑动失效,做不成下拉刷新功能

解决思路 :

FlatList滑动时,判断滑动方向,如果是下拉就屏蔽react-native-scrollable-tab-view左右滑动的功能,等下拉时间结束时再开启,如果方向是左右就开启react-native-scrollable-tab-view左右滑动的功能,不好的地方就是,手势切换时会有感觉

代码如下:
<FlatList
         data={this.state.data}
         renderItem={this.renderListItem}
         refreshing={this.state.refreshing}
         onRefresh={this._renderRefresh}
         style={{marginBottom:40}}
         onTouchStart={(e) => {
             this.pageX = e.nativeEvent.pageX;
             this.pageY = e.nativeEvent.pageY;
         }}
        onTouchMove={(e) => {
               if(
                     Math.abs(this.pageY - e.nativeEvent.pageY) >               Math.abs(this.pageX -     e.nativeEvent.pageX)){ 
               // 下拉
                 this.props.lockSlide();
                    } else { // 左右滑动
                    this.props.openSlide(); 
         } } />

主要方法是onTouchStart,onTouchMove, 屏蔽react-native-scrollable-tab-view左右滑动

 

调用:

调用
_lockSlide(){ this.setState({
      scrollTabViewLocked : true
    })}

_openSlide(){ this.setState({
      scrollTabViewLocked : false
    });}

 

 

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/11108393.html

转载请著名出处!谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/11108393.html

2018-04-18 15:34:55 wapchief 阅读数 607
  • 完全征服React Native

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

    57472 人正在学习 去看看 李宁

正好刚开始学RN,熟悉一下控件和基本使用。

涉及的知识点:

1、fetch网络请求,get 拼接参数,解析json。
2、ScrollableTabView、ScrollableTabBar 分类布局。
3、FlatList 数据列表。
4、Navigation 路由携带参数跳转。
5、下拉刷新,结合了 Tab 切换数据更新

需要导入到 RN 的第三方库:

react-native-scrollable-tab-view
导入方法:
1、在项目的根路径使用下面命令行

npm install react-native-scrollable-tab-view --save

2、检查项目的 package.json 中的 dependencies 下是否添加进来了,如果没有就手动依赖下,版本号要一致。
https://badge.fury.io/js/react-native-scrollable-tab-view

  "dependencies": {
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.4",
    "react-native-deprecated-custom-components": "latest",
    "react-native-image-picker": "^0.26.7",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-swiper": "^1.5.13",
    "react-navigation": "^1.5.11"
  }

建议安装 rnmp 自动依赖工具,这样就不需要在导包的时候再手动去添加本地依赖。

npm install rnpm -g
rnpm link

页面布局

1、可滚动的 TabView

使用前需要先导入到当前 js

import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view'

DefaultTabBar 和 ScrollableTabBar 是可选择是否超出屏幕滚动。前者适用于固定的 Tabbar。后者适用于有多种分类的滚动 Tab。
onChangeTab 是 Tab 点击切换的监听,在这里可以执行刷新等效果。


    return (
      <ScrollableTabView
        initialPage={0}
        renderTabBar={() => <ScrollableTabBar/>}
        tabBarUnderlineStyle={{}}
        onChangeTab={(obj) => {
          this._onRefresh(news[obj.i])
        }}
      >
        <Text tabLabel='头条'/>
        <Text tabLabel='社会'/>
        <Text tabLabel='国内'/>
        <Text tabLabel='国际'/>
        <Text tabLabel='娱乐'/>
        <Text tabLabel='体育'/>
        <Text tabLabel='军事'/>
        <Text tabLabel='科技'/>
        <Text tabLabel='财经'/>
        <Text tabLabel='时尚'/>
      </ScrollableTabView>
    )
2、下拉刷新Refresh+FlatList

FlatList 和 ListView 一样,不过 FlatList 处理列表的效率更高,所以建议使用,而且内置的方法有支持 iOS 和 Android 平台的下拉刷新效果。

而且给 List 添加分割线和 Header 也很简单。

RefreshControl 就是下拉刷新的布局,Android 和 iOS 在刷新样式上有所不同。


return (
        <FlatList
          data={this.state.result.data}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          ListHeaderComponent={this._headerTabView()}
          ItemSeparatorComponent={this._itemDivide}
          refreshControl={
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this._onRefresh.bind(this,this.state.newsType)}
            />
          }
        />

    )
3、列表的Item布局

需要在外层使用 TouchableOpacity 获取整个 View 的点击事件。
通过 item 展示和解析数据。在 RN 中不需要定义每个 json 数据的字段名称 。所以在解析的时候直接使用参数名调用就能拿到数据。

  _renderItem = ({item, index}) => {
    return (
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={this.itemClick.bind(this, item, index)}>
        <View style={{backgroundColor: '#ffffff', padding: 10, flexDirection: 'row'}}>

          <Image source={{uri: item.thumbnail_pic_s02}} style={styles.imgStyle}/>

          <View style={{flex: 1, flexDirection: 'column'}}>

            <Text style={{
              paddingRight: 10,
              marginLeft: 10,
              width: screenWidth * 0.65,
              height: 80 * 0.7
            }}>{item.title}</Text>

            <View style={{flexDirection: 'row', paddingLeft: 10, paddingRight: 10}}>
              <Text style={styles.subTitle}>{item.category + '  ' + item.author_name}</Text>
              <Text style={styles.subTitle}> {item.date}</Text>
            </View>
          </View>

        </View>

      </TouchableOpacity>
    )
  }

具体实现

1、声明一些变量

为了方便查看获取到的 json 这里直接按照 API 返回的格式去定义变量。

 constructor (props) {
    super(props)
    //在这里定义json返回的key
    this.state = {
      //控制分类展示
      isShow: false,
      //分类
      newsType: 'top',
      //下拉刷新
      refreshing: false,
      //data数据
      resultJson: null,
      error_code: '',
      reason: '',
      result: {
        data: ''
      }
    }
  }
2、通过网络获取数据源

这里我使用了一个阿里的新闻 API 。
需要在请求的时候将申请到的 appCode 以添加请求头的方式提供给 API 。

如果不需要指定获取新闻的类型,则不需要提供 type 类型。

// type类型:top(头条,默认),shehui(社会),guonei(国内),guoji(国际),yule(娱乐),tiyu(体育)junshi(军事),keji(科技),caijing(财经),shishang(时尚)

fetch 就是执行网络请求的入口。

第一个 .then 是为了指定获取到的 json 以什么样的格式返回,如果需要解析可以直接返回 json 格式,方便下面的解析操作。
同时在成功拿到数据之后,需要将刷新状态设置为 false ,关闭下拉刷新的状态。

第二个 .then 就是通过第一个返回的类型数据,已经格式化好了。只需要解析并赋值就行。

同样当遇到请求错误的情况,通过 catch 抛出异常,在方法内处理异常。

const header = new Headers()
 getRequest (url, type) {
    /*网络请求的配置*/
    header.append('Authorization', appCode)
    const opts = {
      method: 'GET',
      headers: header,
    }
    fetch(url + '?type=' + type, opts)
      .then((response) => {
        this.setState({refreshing: false})
        return response.json()
      })
      .then((responseJson) => {
        this.setState({
          resultJson: responseJson,
          error_code: responseJson.error_code,
          reason: responseJson.reason,
          result: responseJson.result,
          data: responseJson.result.data,
        })
        // alert(this.state.reason)
      })
      .catch((error) => {
        alert(error)
      })
  }
3、下拉刷新

在 RefreshControl 布局的 onRefresh 方法中调用。调用的时候,重新开启下拉刷新的效果。


  //下拉刷新
  _onRefresh (type) {
    this.setState({refreshing: true})
    this.getRequest(newsUrl, type)
  }
4、其它

1.
componentDidMount 是在 render 方法进来之后立即调用的方法。
类似于 Android上的onViewCreate 方法,一般在这个方法内可以先进行网络请求,消息订阅等操作。

  componentDidMount () {
    this.getRequest(newsUrl, this.state.newsType)
  }

2.
跳转需要用到路由,关于路由的使用有时间再整理。

  //列表点击跳转事件
  itemClick (item, index) {
    // alert('新闻标题:' + item.author_name + '\n时间:' + item.date+'\n'+item.thumbnail_pic_s);
    this.props.navigation.navigate('Details', {
      title: item.title,
      url: item.url,
    })
  }

3.

 //List列表分割线
  _itemDivide = () => {
    return (
      <View style={{height: 10}}/>
    )
  }

关于

  • 语法使用ES6标准
  • React Native 版本 0.54.4

Demo:https://github.com/wapchief/ReactNativeDemo
有兴趣一起学习的朋友可以关注下,将持续更新学习进度,在 Demo 上体现。
目前其它实现的功能有:banner轮播、相册和相机调用、网页加载。

TabNavigator自定义Tab

阅读数 2443

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