[React Native Android 安利系列]手机百度feed流的实现

635 查看

欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：
https://segmentfault.com/blog...

经过前几节的学习我们基本掌握了react-native样式的书写与布局的方式。这一节，我们将一起来做个动手实践的例子。看到这边文章的同学最好也跟着做一下，来巩固一下自己的react-native能力。选用的APP，太复杂的话，做起来比较费时，太简单又没有什么意思了，所以，我们模仿一下手机百度APP。难度适中。
本章，咱们一起动个手，来模仿一下手机百度的新闻流。学习一样东西，最好在有了一定基础之后，最好照着已有的一些产品，简单的实现一下。

1. 手机百度的feed流样式观察

动手之前，我们先来看看手机百度新闻feed流，都由那些元素组成吧，如图1.1：

图1.1
我们看到，整体由上方的搜索框+工具条组成，我们暂且叫上方部分为搜索区吧，下方则是由新闻内容区组合而成。下方是由几个工具组成的底部工具栏。在滑动下方新闻feed流过程中，上方的搜索区位置不变。下方的工具栏位置也不变。

2. 设计目录结构及代码书写

好了，我们大致的结构分析完了。要coding？别捉急，我们在coding之前还是要好好设计目录结构的。根据上面分析的信息，我们决定先将整个activity拆分为三大块。
1 搜索区
2 中间内容区
3 底部工具栏区

2.1 拆分模块

所以，我认为，首先要将三个区块拆为三个模块。我们需要一个static文件夹，然后我们在static文件夹下，为每个区域生成一个模块(如图2.1.0)：

图2.1.0
接下来的样式文件，也是各自放于自己的模块中去维护，包括图片，通过这种方式，组件可以很好的成为一个整体。
比如，我们的searchArea组件，我们在searchArea中创建一个index.js存放searchArea组件的类与jsx元素。而我们将它的样式放在同目录下的style.js里面，如图2.1.1所示：

图2.1.1
好了，组件都建立好了。我们开始书写主入口代码吧。

2.2 reactjs基础粗讲(学过react-web的同学，可跳过)

初学react的同学可能会迷惑，之前不都是写在一个文件里吗，为什么可以拆分成好几个文件，我们在这里简单的先讲解一下react的基础，之后我会在我的reac-native-android系列教学中，详细讲解这一基础知识。
reactjs中，组件概念是比较强的，举一个简单的例子，我们写一个简单的、分多个快组成的应用的时候，可能会这样写：

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View>
            <View><Text>这是这个应用的第一块</Text></View>
            <View><Text>这是这个应用的第二块</Text></View>
        </View>
    }
}

AppRegistry.registerComponent('hellowReact', () => hellowReact);

我们看到，这个应用由两个快组成。两个块儿的逻辑如果非常复杂的话，放在一个类里面维护，是个非常痛苦的事情。
所以react主张，将自己的应用化为多个组建。这样，复用行得到了提高，维护成本也大大降低了。所以，按照标准做法，我们可以将上述两个块儿，拆解成两个组件：

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View>
            <BlockOne />
            <BlockTwo />
            <View><Text>这是这个应用的第二块</Text></View>
        </View>
    }
}

class BlockOne extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View><Text>这是这个应用的第一块</Text></View>;
    }
}

class BlockTwo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View><Text>这是这个应用的第二块</Text></View>;
    }
}

AppRegistry.registerComponent('hellowReact', () => hellowReact);

这样达到了代码封装的效果，react支持将两个组建作为基础组建使用，就像上面代码中的BlockOne与BlockTwo，都是可以当做普通组建被插入到组建中去的。

接下来，我们将BlockOne与BlockTwo拆出去，变成两个文件。这样，代码之间就互相隔离了，代码如下：

/**
 * @file index.android.js
 * @desc 应用的主入口
 */

// 将两个组件以模块的形式导入
let BlockOne = require('blockOne.js');
let BlockTwo = require('blockTwo.js');

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        // 直接使用写好的两个组件，以标签的形式使用即可
        return <View>
            <BlockOne />
            <BlockTwo />
            <View><Text>这是这个应用的第二块</Text></View>
        </View>
    }
}

AppRegistry.registerComponent('hellowReact', () => hellowReact);
/**
 * @file blockOne.js
 * @desc 第一块儿的组件
 */
class BlockOne extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View><Text>这是这个应用的第一块</Text></View>;
    }
}

// 将组件导出
module.exports = BlockOne;
/**
 * @file blockTwo.js
 * @desc 第二块儿的组件
 */
class BlockTwo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <View><Text>这是这个应用的第二块</Text></View>;
    }
}

// 将组件导出
module.exports = BlockTwo;

上面这种形式的代码，在reactjs中是非常常见的。所以各位看官，也尽量要使用这种组件化的方法去写react。接下来，我们的样例代码，也会使用这种组件化的方法去写。

2.3 入口代码

看过我之前教程的同学们可能还记得，react-native工程的入口js文件，安卓版本的是：'index.android.js'。
我们就先将主入口文件搭建成一个空的架子。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    NativeModules
} from 'react-native';

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {}; 
    }   
    render() {
        return (
            <View style={styles.container}>
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

运行上述代码，我们会看到一片空白，这是因为我们只写了一个view，其他的什么都没有写(如图2.3.1)：

图2.1.1

2.4 搜索框部分组件(searchArea)

我们先写搜索框部分的jsx和样式，如图2.4.1。

图2.4.1
我们将两个素材从手机百度的包中拽出来（将手机百度apk的后缀名从.apk改成.zip，然后解压，在其中找找就能找到，或者在本文后面的示例代码中也能找到）。
然后开始书写index.js
我们首先要将必要的基础模块和两个图片引入：

'use strict'
// 必要的基础模块
import React, {Component} from 'react';
import {
    View,
    Text,
    Image
} from 'react-native';

// 所需要的两张资源图片(均从百度的apk中获取)
let homeIcon = require('./icn_feed_go_home.png');
let refreshIcon = require('./icn_feed_refresh.png');

然后我们开始书写自己的react组件，SearchArea，我们先把组件的结果大致写出来，我们会有一个外围包裹的View，然后上面会有一个搜索框，下面有一个工具栏的包裹用的view：

class SearchArea extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };  
    }
    
    render() {
        return (
            <View>
                <View></View>
                <View></View>
            </View>
        );
    }
}

module.exports = SearchArea;

接下来，我们为其添加样式，还是老办法，我们将以前与组建写在一起的style，放在style.js中，再将其导出，并在index.js中，将其引入：

/*
 * @file searchArea/style.js
 * @author houyu
 * @desc 模拟手百的搜索框区域
 */
'use strict'
import React, {Component} from 'react';
import {
    StyleSheet,
    Image
} from 'react-native';

// 创建样式
const headminiStyle = StyleSheet.create({
    topBar: {
        height: 90,
        backgroundColor: '#f8f8f8',
        borderBottomWidth: 1,
        borderColor: '#f2f2f2',
    },
});

// 将样式导出
module.exports.headminiStyle = headminiStyle;

我们在样式中增加一个搜索区域的大致样式，方便我们自己先查看一下(效果如图2.4.2)：

// 引入自己模块的样式
import headStyle from './style.js';

class SearchArea extends Component {

    constructor(props) {
        super(props);
        // 将样式放在state中
        this.state = {
            headStyle: headStyle.headminiStyle
        };  
    }
    
    render() {
        //  用state中存下的样式去渲染
        return (
            <View style={this.state.headStyle.topBar}>
                <View></View>
                <View></View>
            </View>
        );
    }
}

module.exports = SearchArea;


图2.4.2
接着我们细化一下，将搜索框部分。写出点样式来：

const headminiStyle = StyleSheet.create({
    topBar: {
        height: 90,
        backgroundColor: '#f8f8f8',
        borderBottomWidth: 1,
        borderColor: '#f2f2f2',
    },  
    searchbox: {
        flex: 5,
        marginTop: 7,
        marginLeft: 9,
        marginRight: 9,
        borderColor: '#d0d2d5',
        borderWidth: 1,
    },  
    toolBar: {
        flex: 4,
        marginLeft: 9,
        marginRight: 9,
    },  
});

这里，我们就用到了上节课说到的flex，搜索框与工具栏的高度比例大概是5：4，于是我们写了两个样式的flex为5与4，再将搜索框的边框与背景勾勒出来，就得到了一个大概的搜索框部分(如图2.4.3)：

图2.4.3
紧接着，我们需要在下面的工具栏里面加上左边的首页按钮(如图2.4.1)，和右边的刷新按钮(如图2.4.2)，左边是一个图片+一个文字块(首页)，右边是一个刷新图片

图2.4.1

图2.4.2

class SearchArea extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            headStyle: headStyle.headminiStyle
        };  
    }   
                        
    render() {
        return (
            <View style={this.state.headStyle.topBar}>
                <View style={this.state.headStyle.searchbox}></View>
                <View style={this.state.headStyle.toolBar}>
                    <View style={this.state.headStyle.toIndex}>
                        <Image
                            source={homeIcon}
                            style={this.state.headStyle.topBarHomeIcon}
                        />  
                        <Text>首页</Text>
                    </View>
                    <View style={this.state.headStyle.refresh}>
                        <Image
                            source={refreshIcon}
                            style={this.state.headStyle.topBarRefreshIcon}
                        />  
                    </View>
                </View>
            </View>
        );  
    }   
}

我们将元素都写好，加上样式：

const headminiStyle = StyleSheet.create({
    topBar: {
        height: 90,
        backgroundColor: '#f8f8f8',
        borderBottomWidth: 1,
        borderColor: '#f2f2f2',
    },  
    searchbox: {
        // flex的高度占比为搜索框5，工具栏4--5:4
        flex: 5,
        marginTop: 7,
        marginLeft: 9,
        marginRight: 9,
        borderColor: '#d0d2d5',
        borderWidth: 1,
    },  
    toolBar: {
        flex: 4,
        // 让首页按钮与刷新按钮，横向并排
        flexDirection: 'row',
        // 让首页按钮与刷新按钮，上下处于居中对其
        alignItems: 'center',
        // 让首页按钮与刷新按钮左右
        justifyContent: 'space-between',
        marginLeft: 9,
        marginRight: 9,
    },  
    toIndex: {
        // 让首页图片与首页文字并排成一行
        flexDirection: 'row',
        // 让首页图标，与首页文字上下居中
        alignItems: 'center',
    },
    topBarHomeIcon: {
        // 背景图片拉伸
        resizeMode: Image.resizeMode.contain,
        height: 27,
        width: 27,
        marginRight: 5,
    },
    topBarRefreshIcon: {
        // 背景图片拉伸
        resizeMode: Image.resizeMode.contain,
        height: 45,
        width: 45,
    },
});

通过上面的带啊，我们又重温了一些上节的知识点，元素默认是垂直排列的，可是我们需要元素横向排列的话，就得用到flexDirection，设置为row。并且我们需要，"首页按钮"与"刷新按钮",并排显示，且左右分开(如图2.4.3)：

图2.4.3

于是我们用到了 flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',这三个属性。于是，左边的首页按钮和右边的刷新按钮横排显示，且左右靠边了，垂直方向上，两侧的按钮也居中对其了。
接下来，我们看一下上部分的整体(如图2.4.4)：

图2.4.4
接下来，我们先把内容区与底部的工具栏的大致形状给做出来。

2.5 内容区组建与底部栏组建(content与toolBar)

我们首先将三个组建块儿都引入进来：

// 三个组件块儿一一引入
const SearchArea = require('./static/searchArea');
const Content = require('./static/content');
const ToolBar = require('./static/toolBar');

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {}; 
    }   
    render() {
        // 三个组建块儿均渲染到主要容器上
        return (
            <View style={styles.container}>
                <SearchArea />
                <Content />
                <ToolBar />
            </View>
        );  
    }   
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',
    },  
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

我们先把中间内容区与底部工具栏的比例按照设计图算出，得到大概这样的比例：

顶部搜索区高度 : 中间内容区高度 : 底部工具栏高度 = 9 : 41 : 5

于是我们将三块儿区域的fex分别写为：9/41/5。

我们把底部工具栏简写一下，目前用图片代替。

'use strict'
import React, {Component} from 'react';
import {
    View,
    Text,
    Image
} from 'react-native';
// 引入底部工具栏的样式
import {ToolBarStyle} from './style.js';
// 底部工具栏暂时不做，使用一张大的图片代替
let bottomBanner = require('./bottom_banner.png');

class ToolBar extends Component {

    constructor(props) {
        super(props);
    }   
        
    render() {
        return (
            <View style={ToolBarStyle.bottomBar}>
                <Image 
                    source={bottomBanner}
                    style={ToolBarStyle.bottomBanner}
                />  
            </View>
        );  
    }   
}
// 导出组件
module.exports = ToolBar;

然后我们写一下没有内容的中间区域，样式也很简单，就是一个白色的块儿：

'use strict'
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    ListView
} from 'react-native';
import {contentStyle} from './style.js';

class Content extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }
   
    render() {
        return (
            <View style={contentStyle.content}>
            </View>
        );
    }
}

module.exports = Content;
'use strict'
import React, {Component} from 'react';
import {
    StyleSheet,
    Image,
} from 'react-native';

const contentStyle = StyleSheet.create({
    content: {
        flex: 41, 
        backgroundColor: '#fff',
    },
});

module.exports.contentStyle = contentStyle;

效果如图2.5.1：

图2.5.1

请注意下面的工具栏用的是图片哦。

2.6 新闻列表

紧接着，因为我们的内容区是新闻列表，所以我们需要一个列表组件。我们还需要去写每一个item的样式。

react-native中有一个原生组建，叫做listView，顾名思义，这就是个列表组件，下面我们就将会用这个列表组建完成我们的新闻列表。

2.6.1 listView的使用方法

listView需要两个基本的属性一个是dataSoutce，接受列表的数据，另一个是renderRow，指定对于列表中的每一项的渲染方法。

render() {
    return (
        <View style={contentStyle.content}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderOneRow}
            />
        </View>
    );
}

datasource中传入的数据，需要是DataSource型。所以，我们先建立一个假数据(数据的话，看一下手白大致一个条目上都有哪些信息，抄一下即可)：

constructor(props) {
    super(props);
    var list = [
        {
            title: '英国首相卡梅伦辞职"脱欧派"灵魂人物或接任',
            from: '搜狐新闻',
            time: '3分钟前',
            tag: '视频',
            images: ['http://static.oschina.net/uploads/user/588/1177792_100.jpg?t=1465096324000']
        },
        {
            title: '2.英国首相卡梅伦辞职"脱欧派"灵魂人物或接任',
            from: '搜狐新闻',
            time: '3分钟前',
            tag: '视频',
            images: ['http://static.oschina.net/uploads/user/588/1177792_100.jpg?t=1465096324000']
        },
    ];
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(list)
    };
}

我们还需要建造一个简单的、渲染每一个item的渲染方法--renderOneRow:

renderOneRow(rowData) {
    return <View><Text>一筒最可爱</Text></View>;
}

请注意，这里的rowData就是listView在遍历我们传入的dataSource的时候，给我们的渲染函数传入遍历的当前项数据。

我们可以看到粗略的展示了一个list如图2.6.1

图2.6.1

因为我们的假数据写死了两个，所以list中出现了两项。

我们将这两项再变换一下，写成手机百度的样式，我们先来看看手机百度中，每一项大概的层级，应该是左右结构，右边是图片区域，左侧是文字区域。所以，话不多说，先来两个区域再说(如图2.6.2)：


图2.6.2

renderOneRow(rowData) {
    return <View style={contentStyle.itemContainer}>
        <View style={contentStyle.itemContent}>
            <View style={contentStyle.textArea}>
            </View>
            <View style={contentStyle.imgArea}>
                <Image
                    source={{uri: rowData.images[0]}}
                    style={contentStyle.rightImg}
                />
            </View>
        </View>
    </View>;
}

代码如上，右侧使用一个view包裹的图片，左侧使用一个包裹的view(如图2.6.3所示)：


图2.6.3

const contentStyle = StyleSheet.create({
    content: {
        flex: 41,
        backgroundColor: '#fff',
    },
    // 每一项的容器的样式，左右留白10dp，高度为100dp
    itemContainer: {
        height: 100,
        paddingHorizontal: 10,
    },
    // 每一项的内部包裹
    itemContent: {
        height: 99,
        // 指定横向排列
        flexDirection: 'row',
        // 内部元素上线居中
        alignItems: 'center',
        // 底部一个灰边
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    textArea: {
        // 因为不选用成比例，使用flex:1，左侧的文字区域填充满除了图片剩下的那部分区域
        flex: 1,
        height: 70,
        paddingRight: 12,
    },
    imgArea: {
        height: 85,
        width: 110,
    },
    rightImg: {
        height: 85,
        width: 110,
        backgroundColor: '#000',
        // 指定内容图片填充方式
        resizeMode: Image.resizeMode.cover,
    },
});

这样我们就完成了一个基本的item，这个item是左右结构的，左侧的文字区域我们再进一步细化:

左侧文字区域，可以看出是上下结构的(如图2.6.4)，高度比例大概是4:1


图2.6.4

于是，我们填充了两个块儿，并且左侧内容区域的flexDirection就默认为column就好了。

renderOneRow(rowData) {
    return <View style={contentStyle.itemContainer}>
        <View style={contentStyle.itemContent}>
            <View style={contentStyle.textArea}>
                <Text style={contentStyle.textContent}>
                </Text>
                <View style={contentStyle.tagArea}>
                </View>
            </View>
            <View style={contentStyle.imgArea}>
                <Image
                    source={{uri: rowData.images[0]}}
                    style={contentStyle.rightImg}
                />
            </View>
        </View>
    </View>;
}
tagArea: {
    flex: 1,
    backgroundColor: '#f00',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
},
textContent: {
    flex: 4,
    backgroundColor: '#0f0',
    fontSize: 16,
    fontWeight: 'bold',
    color: '#000',
},

效果如图2.6.5所示：

图2.6.5

good!我们完成了一个上线结构，接着，我们将新闻每一条的标题，填充到上面的绿色框中去(如图2.6.6所示)，获取数据，直接从rowData中拿就行，rowData指代的就是上面咱们写的假数据中的每一条：

renderOneRow(rowData) {
    return <View style={contentStyle.itemContainer}>
        <View style={contentStyle.itemContent}>
            <View style={contentStyle.textArea}>
                <Text style={contentStyle.textContent}>
                    {rowData.title}
                </Text>
                <View style={contentStyle.tagArea}>
                </View>
            </View>
            <View style={contentStyle.imgArea}>
                <Image
                    source={{uri: rowData.images[0]}}
                    style={contentStyle.rightImg}
                />
            </View>
        </View>
    </View>;
}


图2.6.6

接下来的下方tag要注意，是由三个元素组成的左左右，怎么办(如图2.6.7)，flex布局中，并没有讲到，如何左左右，只知道如何居中，如何将元素打散到两侧............等等，其实左左右这种结构，不正是左右结构吗？左边是一个由两个元素组成的view，右边是一个由一个元素组成的view，这样一想，我们的思路瞬间清晰了许多，如图2.6.8所示


图2.6.7


图2.6.8

左侧的红色区域可以放入两个tag"视频"和"2分钟前"。如法炮制，我们写两个小的text，即可完成，如图2.6.9所示：

renderOneRow(rowData) {
    return <View style={contentStyle.itemContainer}>
        <View style={contentStyle.itemContent}>
            <View style={contentStyle.textArea}>
                <Text style={contentStyle.textContent}>
                    {rowData.title}
                </Text>
                <View style={contentStyle.tagArea}>
                    <View style={contentStyle.tags}>
                        <View style={contentStyle.tagContainer}>
                            <Text style={contentStyle.tagEntity}>
                                {rowData.tag}
                            </Text>
                        </View>
                        <Text style={contentStyle.srcNet}>
                            {rowData.from}
                        </Text>
                    </View>
                    <View style={contentStyle.closeTag}>
                        <Text style={contentStyle.closeTagText}>X</Text>
                    </View>
                </View>
            </View>
            <View style={contentStyle.imgArea}>
                <Image
                    source={{uri: rowData.images[0]}}
                    style={contentStyle.rightImg}
                />
            </View>
        </View>
    </View>;
}


图2.6.9

我们再把假数据多写点，于是一个list就完整的展现了出来，如图2.6.10所示

图2.6.10

3 课后作业

又到了课后作业时间，今天的作业是，请完成如图3.1所示形状的item：


聪明的读着，知道该怎么做了吗？

本文中提到的例子与素材，均在下面的github上，需要的话请下载：

https://github.com/houyu01/re...

接下来，我会详细的讲解一下reactjs的基础知识。包括本节中提到的创建组件等，不要走开，请关注我.....

原创文章,版权所有,转载请注明出处


最近更新的内容
你可能感兴趣的文章

2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123

渝公网安备 50010702501581号