内容简介：接上一篇然后类名改为MovieList最后是记得将其导出
接上一篇 ReactNative学习笔记(六)之重新组织应用的样式 继续学习ReactNative
组织应用的组件
我们之前是把逻辑全都写在了App.js的App这个class中, 其实我们可以把将逻辑全都放在一个组件中, 然后将在render方法中return这个组件
在如图的目录下新建一个叫做MovieList.js的文件, 然后将App.js的代码全部复制粘贴过来, 修修改改一下.
首先样式的导入路径要修改一下
import styles from '../Styles/Main';
然后类名改为MovieList
class MovieList extends Component<Props> {
constructor(props) {
super(props)
this.state = {
movies: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
}),
loaded: false
};
this.fetchData();
}
...
最后是记得将其导出
export { MovieList as default};
然后我们就可以在App.js中引用这个组件了, 然后将冗余的代码删除
import React, {Component} from 'react';
import MovieList from './app/Components/MovieList';
export default class App extends Component<Props> {
constructor(props) {
super(props)
}
render() {
return (
<MovieList/>
);
}
}
运行效果:
应用仍然是原来的样子
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Zen of CSS Design
Dave Shea、Molly E. Holzschlag / Peachpit Press / 2005-2-27 / USD 44.99
Proving once and for all that standards-compliant design does not equal dull design, this inspiring tome uses examples from the landmark CSS Zen Garden site as the foundation for discussions on how to......一起来看看 《The Zen of CSS Design》 这本书的介绍吧!
