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

赞 (0)

相关推荐

  • ReactNative页面跳转Navigator实现的示例代码

    ReactNative页面跳转Navigator实现的示例代码

    本文介绍了ReactNative页面跳转Navigator,分享给大家.具体如下: Navigator即导航器,通过导航器我们可以实现应用在不同的页面之间进行跳转. 导航器会建立一个路由栈,用来弹出,推入或者替换路由状态.该路由栈相当于Android原生中使用的任务栈. renderScene 该方法就相当于我们使用的startActivity方法了,我们可以在该方法中设置需要渲染的场景(跳转的页面),该方法接收两个参数(必要参数),route和navigator,其中route就是路由的页面,

  • React-Native中禁用Navigator手势返回的示例代码

    在React-Native开发中,经常会用到导航.导航做什么用的呢,简单点说就是页面跳转. 个项目中,肯定有很多的页面要跳来跳去的,RN就给我们提供了Navigator组件,可以很好的管理页面的跳转. 在所有工作做完之后,发现有个bug!在从第一个界面跳转到下一个界面后,如果从屏幕左边向右滑,或者从上面想下滑,你会发现一个神奇的事情,那就是页面会通过滑动而返回到上一个界面.这让我们很尴尬了,本来打算禁止跳转返回的,或者返回时还要做些什么处理的,结果啥都没做,直接返回,可以说,这个功能有点适得其反

  • React Native中Navigator的使用方法示例

    React Native中Navigator的使用方法示例

    前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

  • react-native-tab-navigator组件的基本使用示例代码

    react-native-tab-navigator组件的基本使用示例代码

    要做的效果很简单,如下图所示: 使用基本教程 1.引入组件 import TabNavigator from 'react-native-tab-navigator'; Github上的地址 2.render方法中返回: render() { return ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '电影'}

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

    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/

  • React Native项目中使用Lottie动画的方法

    React Native项目中使用Lottie动画的方法

    Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需

  • 详解React Native项目中启用Hermes引擎

    详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • React将组件作为参数进行传递的3种方法实例

    React将组件作为参数进行传递的3种方法实例

    目录 前言 方式一:直接传递 jsx 创建好的元素 方式二:直接传递组件本身 方式三:传递一个返回组件的函数 三种方案的对比 总结 前言 在日常的开发中,开发通用组件的机会其实并不多,尤其是在各种组件库已经遍地都是的情况下.而作为一个通用组件库的使用者,经常会看到把 React 组件作为参数传递下去的场景,每当这个时候,其实或多或少都会有一些疑问,比如:有些组件传递下去的是组件名,而有些组件传递下去的是一个箭头函数返回一个组件,而有些直接传递一个 jsx 创建好的元素,这些传递方案的适用场景如何

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • element-ui 的el-button组件中添加自定义颜色和图标的实现方法

    我使用的element-ui的版本是V1.4.13. 如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值. 现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标.如下图所示: 为了方便开发,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件.开发人员在开发时只要在type中添加不同的类的值,就能添加上颜色和图标. 1.在element-ui的button源码中加了自定义指

  • React在组件中如何监听redux中state状态的改变

    React在组件中如何监听redux中state状态的改变

    目录 在组件中监听redux中state状态的改变 解决方式 React和redux的状态处理 在组件中监听redux中state状态的改变 解决方式 1.在组件中引入store 2.在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过) 组件完整代码如下: import React, { Component } from 'react' import CSSModules from 'react-css-modules'  imp

  • TS装饰器bindThis优雅实现React类组件中this绑定

    目录 为什么this会是undefined 优雅的@bindThis 为什么this会是undefined 初学React类组件时,最不爽的一点应该就是 this 指向问题了吧!初识React的时候,肯定写过这样错误的demo. import React from 'react'; export class ReactTestClass extends React.Component { constructor(props) { super(props); this.state = { a: 1

  • vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v-33f8ed40></div> <template> //我用js在上面div标签中插入一个<p class='text'>text goes here</p> <script> export default { ... mounted(){

  • 详解如何在项目中使用jest测试react native组件

    详解如何在项目中使用jest测试react native组件

    目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/.我们可以看到Jest官网宣称的是:Painless JavaScript Testing.是Facebook用于测试服务和React应用程序的JavaScript单元测试框架. 所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成.单元测试是

随机推荐