react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
前言
本文主要給大家介紹了關(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í)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
參考
相關(guān)文章
react性能優(yōu)化達到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細介紹了react性能優(yōu)化達到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03詳解React+Koa實現(xiàn)服務(wù)端渲染(SSR)
這篇文章主要介紹了詳解React+Koa實現(xiàn)服務(wù)端渲染(SSR),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05