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', '開源中國', '開發(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=這個樣式,否則它里面裝載的組件不會顯示
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
參考
相關文章
React中useEffect原理的代碼簡單實現(xiàn)詳解
React的useEffect鉤子是React函數(shù)組件中處理副作用,本文將通過一個簡單的例子解釋如何用代碼實現(xiàn)useEffect的基本原理,感興趣的小伙伴可以了解下2023-12-12
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11

