react-native组件中NavigatorIOS和ListView结合使用的方法
程序员文章站
2022-07-06 21:09:44
前言
本文主要给大家介绍了关于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=这个样式,否则它里面装载的组件不会显示
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
参考
上一篇: 正则表达式regular expression详述(二)
下一篇: 夜店把妹绝招,屡试不爽