react-native组件中NavigatorIOS和ListView结合使用的方法


Posted in Javascript onSeptember 30, 2017

前言

本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

先看效果

react-native组件中NavigatorIOS和ListView结合使用的方法

使用方法

index.ios.js

import React, {Component} from 'react';
import {
 AppRegistry,
 NavigatorIOS
} from 'react-native';

import NewsList from './components/NewsList';
export default class ITNews extends Component {
 render() {
 return (
  <NavigatorIOS
  style=
  initialRoute=
  />
 );
 }
}

NewsList.js

import React, {Component} from 'react';
import {ListView, Text, StyleSheet, TouchableHighlight} from 'react-native';

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class NewsList extends Component {

 constructor(props) {
 super(props);
 this.state = ({
  dataSource: ds.cloneWithRows(['CNodeJS', '开源中国', '开发者头条', '推酷', 'SegmentFault', 'IT之家', 'V2EX', '知乎日报', 'W3CPlus']),
 });
 }

 _onPress(rowData) {
 console.log(rowData);
 }

 render() {
 return <ListView
  style={styles.listView}
  dataSource={this.state.dataSource}
  renderRow={(rowData) =>
  <TouchableHighlight
   style={styles.rowStyle}
   underlayColor='#008b8b'
   onPress={() => this._onPress(rowData)}>
   <Text style={styles.rowText}>{rowData}</Text>
  </TouchableHighlight>}
 />
 }
}

const styles = StyleSheet.create({
 listView: {
 backgroundColor: '#eee',
 },
 rowText: {
 padding: 10,
 fontSize: 18,
 backgroundColor: '#FFFFFF'
 },
 rowStyle: {
 flex: 1,
 marginBottom: 1,
 justifyContent: 'center',
 },
});

说明

NavigationIOS必须要加上style=这个样式,否则它里面装载的组件不会显示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

  • ListView
  • NavigatorIOS

源码:https://github.com/tomoya92/ITNews-React-Native

Javascript 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 #Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 #Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 #Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 #Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 #Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 #Javascript
You might like
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
JS分页效果示例
2013/10/11 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python之str操作方法(详解)
2017/06/19 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
python编写计算器功能
2019/10/25 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python netmiko模块的使用
2020/02/14 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
技术总监管理职责范本
2014/03/06 职场文书
计算机网络专业求职信
2014/06/05 职场文书
音乐教师求职信
2014/06/28 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
公司欠款证明
2015/06/24 职场文书
PHP解决高并发问题
2021/04/01 PHP
Python 使用dict实现switch的操作
2021/04/07 Python