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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 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学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
JS日历 推荐
2006/12/03 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python 字典修改键(key)的几种方法
2018/08/10 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
淘宝客服工作职责
2014/07/11 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Golang ort 中的sortInts 方法
2022/04/24 Golang