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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
js实现一个简易计算器
Mar 30 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
网页上facebook分享功能具体实现
2014/01/26 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
JavaScript实现音乐导航效果
2020/11/19 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
《地震中的父与子》教学反思
2014/04/10 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2015年超市工作总结
2015/04/09 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记
MySQL分区路径子分区再分区
2022/04/13 MySQL