欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年09月30日 09:42:18   作者:Tomoya  
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。

前言

本文主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(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', '開源中國', '開發(fā)者頭條', '推酷', '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=這個樣式,否則它里面裝載的組件不會顯示

總結(jié)

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

參考

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

相關(guān)文章

  • 提高React界面性能的十個技巧

    提高React界面性能的十個技巧

    眾所周知,性能是Web應(yīng)用界面的關(guān)鍵方面,它直接影響到用戶的使用體驗。本文將向您展示十種提高React UI性能的特定技術(shù)和一般方法。
    2021-05-05
  • react-router-dom的使用說明

    react-router-dom的使用說明

    這篇文章主要介紹了react-router-dom的使用說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • react性能優(yōu)化達到最大化的方法 immutable.js使用的必要性

    react性能優(yōu)化達到最大化的方法 immutable.js使用的必要性

    這篇文章主要為大家詳細介紹了react性能優(yōu)化達到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • react實現(xiàn)換膚功能的示例代碼

    react實現(xiàn)換膚功能的示例代碼

    這篇文章主要介紹了react實現(xiàn)換膚功能的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • React Hooks使用方法全方位介紹

    React Hooks使用方法全方位介紹

    在react類組件(class)寫法中,有setState和生命周期對狀態(tài)進行管理,但是在函數(shù)組件中不存在這些,故引入hooks(版本:>=16.8),使開發(fā)者在非class的情況下使用更多react特性
    2023-03-03
  • 詳解React+Koa實現(xiàn)服務(wù)端渲染(SSR)

    詳解React+Koa實現(xiàn)服務(wù)端渲染(SSR)

    這篇文章主要介紹了詳解React+Koa實現(xiàn)服務(wù)端渲染(SSR),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • React?之?Suspense提出的背景及使用詳解

    React?之?Suspense提出的背景及使用詳解

    這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • react:swr接口緩存案例代碼

    react:swr接口緩存案例代碼

    useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧
    2023-11-11
  • 詳解React Fiber的工作原理

    詳解React Fiber的工作原理

    這篇文章主要介紹了React Fiber的工作原理的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用React框架,感興趣的朋友可以了解下
    2021-04-04
  • 利用React實現(xiàn)虛擬列表的示例代碼

    利用React實現(xiàn)虛擬列表的示例代碼

    虛擬列表,其實就是將一個原本需要全部列表項的渲染的長列表,改為只渲染可視區(qū)域內(nèi)的列表項,但滾動效果還是要和渲染所有列表項的長列表一樣。本文就將利用React實現(xiàn)虛擬列表,需要的可以參考一下
    2022-08-08

最新評論