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与C# Windows应用程序交互方法
Jun 29 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
php去除重复字的实现代码
2011/09/16 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
关于php开启错误提示的总结
2019/09/24 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
python设置环境变量的作用整理
2020/02/17 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
中专生自我鉴定
2013/12/17 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
森林防火工作方案
2014/02/14 职场文书
新年晚会主持词
2014/03/24 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
入党介绍人考察意见
2015/06/01 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers