ReactNative学习笔记(七)之重新组织应用的组件

栏目: 服务器 · 发布时间: 7年前

内容简介：接上一篇然后类名改为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/>
        );
    }
}

运行效果:

应用仍然是原来的样子

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web 2.0 Architectures

Duane Nickull、Dion Hinchcliffe、James Governor / O'Reilly / 2009 / USD 34.99

The "Web 2.0" phenomena has become more pervasive than ever before. It is impacting the very fabric of our society and presents opportunities for those with knowledge. The individuals who understand t......一起来看看《Web 2.0 Architectures》这本书的介绍吧!

码农工具