react-native组件中NavigatorIOS和ListView结合使用的方法

 更新时间:2017年09月30日 09:42:18   转载 作者:Tomoya  
这篇文章主要给大家介绍了关于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=这个样式,否则它里面装载的组件不会显示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

参考

源码:https://github.com/tomoya92/ITNews-React-Native

相关文章

  • JavaScript实现设计模式中的单例模式的一些技巧总结

    JavaScript实现设计模式中的单例模式的一些技巧总结

    单例模式是JavaScript项目中最常用的设计模式之一,下面罗列了JavaScript实现设计模式中的单例模式的一些技巧总结,包括惰性加载与分支技术等,需要的朋友可以参考下.
    2016-05-05
  • 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

    让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

    在上一篇文章里,我们设计了一套能在JavaScript中描述函数重载的方法,这套方法依赖于一个叫做Overload的静态类,现在我们就来看看如何实现这个静态类。
    2009-08-08
  • 详解基于javascript实现的苹果系统底部菜单

    详解基于javascript实现的苹果系统底部菜单

    本篇文章主要对基于javascript实现的苹果系统底部菜单进行了详细的分析说明,有助于理解和学习编写苹果系统底部菜单,相信会对大家有所帮助,下面就跟小编一起来看看吧
    2016-12-12
  • 用file标签实现多图文件上传预览

    用file标签实现多图文件上传预览

    本文介绍了用file标签实现多图文件上传预览的方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js 上下左右键控制焦点(示例代码)

    js 上下左右键控制焦点(示例代码)

    这篇文章主要是对js上下左右键控制焦点的示例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 浅析$.getJSON异步请求和同步请求

    浅析$.getJSON异步请求和同步请求

    下面小编就为大家带来一篇浅析$.getJSON异步请求和同步请求。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript入门教程基础篇

    javascript入门教程基础篇

    这篇文章主要介绍了javascript入门教程,全部内容都是javascript的基础知识,内容很全面,特别适合刚刚学习javascript的朋友学习,希望大家仔细阅读javascript教程。
    2015-11-11
  • js实现特定位取反原理及示例

    js实现特定位取反原理及示例

    循环输入每组两个数hex和n(0<=n<31),hex是一个16进制的数字,我们要做的是将hex的第n位取反,然后以16进制的形式输出对应的结果
    2014-06-06
  • 浅谈layui 表单元素的选中问题

    浅谈layui 表单元素的选中问题

    今天小编就为大家分享一篇浅谈layui 表单元素的选中问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • IE的事件传递-event.cancelBubble示例介绍

    IE的事件传递-event.cancelBubble示例介绍

    关于event.cancelBubble,Bubble就是一个事件可以从子节点向父节点传递,下面有个不错的示例,大家可以感受下
    2014-01-01

最新评论