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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JS面向对象之多选框实现
Jan 17 Javascript
javascript实现前端成语点击验证
Jun 24 Javascript
webpack5 联邦模块介绍详解
Jul 08 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
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jQuery基础知识小结
2014/12/22 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
逻辑链路控制协议
2016/10/01 面试题
应届大学生自荐信格式
2013/09/21 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
八年级物理教学反思
2014/01/19 职场文书
中式结婚主持词
2014/03/14 职场文书
大学校务公开实施方案
2014/03/31 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers