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 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
js动态创建标签示例代码
Jun 09 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
用js实现放大镜效果
Oct 28 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jQuery的框架介绍
2016/05/11 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python程序需要编译吗
2020/06/19 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
党员学习十八大感想
2014/01/17 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
校长四风对照检查材料
2014/09/27 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2016入党心得体会范文
2016/01/06 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
mysql序号rownum行号实现方式
2022/12/24 MySQL