ReactNative學習筆記(七)之重新組織應用的元件
摘要：
接上一篇 ReactNative學習筆記(六)之重新組織應用的樣式 繼續學習ReactNative
組織應用的元件
我們之前是把邏輯全都寫在了App.js的App這個class中, 其實我們可以把將邏輯全都放在一個元件中, 然後將在render方法中return這個元件 ...
接上一篇 ofollow,noindex">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/>
);
}
}
執行效果:
應用仍然是原來的樣子