快捷導(dǎo)航

react-native組件中NavigatorIOS和ListView結(jié)合使用的方法

更新時(shí)間：2017年09月30日 09:42:18 作者：Tomoya

這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。

前言

本文主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說了，來(lái)一起看看詳細(xì)的介紹吧。

先看效果

使用方法

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', '開源中國(guó)', '開發(fā)者頭條', '推酷', 'SegmentFault', 'IT之家', 'V2EX', '知乎日?qǐng)?bào)', '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=這個(gè)樣式，否則它里面裝載的組件不會(huì)顯示

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

參考

ListView
NavigatorIOS

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

您可能感興趣的文章:

相關(guān)文章

提高React界面性能的十個(gè)技巧
眾所周知，性能是Web應(yīng)用界面的關(guān)鍵方面，它直接影響到用戶的使用體驗(yàn)。本文將向您展示十種提高React UI性能的特定技術(shù)和一般方法。
2021-05-05
react-router-dom的使用說明
這篇文章主要介紹了react-router-dom的使用說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法，一步一步優(yōu)化react性能的過程，告訴大家使用immutable.js的必要性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
react實(shí)現(xiàn)換膚功能的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-08-08
React Hooks使用方法全方位介紹
在react類組件（class）寫法中，有setState和生命周期對(duì)狀態(tài)進(jìn)行管理，但是在函數(shù)組件中不存在這些，故引入hooks（版本：>=16.8），使開發(fā)者在非class的情況下使用更多react特性
2023-03-03
詳解React+Koa實(shí)現(xiàn)服務(wù)端渲染(SSR)
這篇文章主要介紹了詳解React+Koa實(shí)現(xiàn)服務(wù)端渲染(SSR)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-05-05
React?之?Suspense提出的背景及使用詳解
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
react:swr接口緩存案例代碼
useSWR 是一個(gè) React Hooks,是 HTTP 緩存庫(kù) SWR 的核心方法之一,SWR 是一個(gè)輕量級(jí)的 React Hooks 庫(kù),通過自動(dòng)緩存數(shù)據(jù)來(lái)實(shí)現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧
2023-11-11
詳解React Fiber的工作原理
這篇文章主要介紹了React Fiber的工作原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下
2021-04-04
利用React實(shí)現(xiàn)虛擬列表的示例代碼
虛擬列表，其實(shí)就是將一個(gè)原本需要全部列表項(xiàng)的渲染的長(zhǎng)列表，改為只渲染可視區(qū)域內(nèi)的列表項(xiàng)，但滾動(dòng)效果還是要和渲染所有列表項(xiàng)的長(zhǎng)列表一樣。本文就將利用React實(shí)現(xiàn)虛擬列表，需要的可以參考一下
2022-08-08