RN实战阶段小结-小项目：书籍列表和展示

这个项目对应的场景对于我们应用开发来说很常见：

1. 通过网络api或其他途径获取到数据源（是一个列表）

2. 通过一个列表简单呈现主要信息，列表可点击进入浏览详情

3. 详情页面接收了来自上个页面传递来的数据，并作一个相对完整的展示；那么这个过程中自然就需要一个导航栏

截图如下：

其中所使用的主要rn技术点归纳如下：

1. 通过fetch函数进行网络请求。

   _refreshData() {
        fetch(ENDPOINT)
            .then((response) => response.json())
            .then((rjson) => {
                this.setState({
                    dataSource1: this.state.dataSource1.cloneWithRows(rjson.results.books)
                });
            });
    }

该函数在componentDidMount中被调用。

2.导航栏实现，并通过它来传值（类似iOS中那种一直在上面显示的导航条）；注意，这里使用的是rn提供的跨平台导航器Navigator。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, ListView , TextInput, Platform, TouchableOpacity, Navigator} from 'react-native';

import NoteMain from './NoteMain';

// 设置默认的路由,也就是ROOTNAV的第一个vc.
const defaultRoute =
{
    component: NoteMain,
    title: "列表页"
};

class rootNav extends Component
{
    // 绘制场景的方法; 可以得到路由和nav的实例;这里从route获取到component (route对象内有很多内容,全部传递给component);
    // 同时将navigator作为属性继续传递到vc中,否则后续vc无法调用this.props.navigator
    // 注意,这里的info为空,暂时没有传递任何数据。
    _renderScene(route, navigator)
    {

        console.log ('_renderSceneing in rootNav');
        console.log(route);
        console.log(route.info);
        let Component = route.component;
        return (
            <Component {...route.info} navigator={navigator} />
        );
    }

    // 绘制navBar,并在每一个nav下的页面展示
    _renderNavBar()
    {
        const styles =
        {
            title:
            {
                flex: 1, alignItems: 'center', justifyContent: 'center'
            },
            button:
            {
                flex: 1, width: 50, alignItems: 'center', justifyContent: 'center'
            },
            buttonText:
            {
                fontSize: 18, color: '#FFFFFF', fontWeight: '400'
            }
        }

        var routeMapper = {
            LeftButton(route, navigator, index, navState) {
                console.log ('index='+ index);
                if(index > 0)
                {
                    return (
                        <TouchableOpacity
                            onPress={() => navigator.pop()}
                            style={styles.button}>
                            <Text style={styles.buttonText}>Back</Text>
                        </TouchableOpacity>
                    );
                }
            },
            // 这个目前没有卵用,等后面加的时候再看。
            RightButton(route, navigator, index, navState)
            {
                // 默认的pop
                if(index > 0 && route.rightButton)
                {
                    return (
                        <TouchableOpacity
                            onPress={() => navigator.pop()}
                            style={styles.button}>
                            <Text style={styles.buttonText}></Text>
                        </TouchableOpacity>
                    );
                }
                else
                    {
                    return null
                }

            },
            Title(route, navigator, index, navState) {
                return (
                    <View style={styles.title}>
                        <Text style={styles.buttonText}>{route.title}</Text>
                    </View>
                );
            }
        };

        return (
            <Navigator.NavigationBar
                style={{
                    alignItems: 'center',
                    backgroundColor: '#55ACEE',
                    shadowOffset:{
                        width: 1,
                        height: 0.5,
                    },
                    shadowColor: '#55ACEE',
                    shadowOpacity: 0.8,
                }}
                routeMapper={routeMapper}
            />
        );
    }

    render()
    {
        console.log ('app rendering');
        return (
            <Navigator
                initialRoute={defaultRoute}
                renderScene={this._renderScene}
                sceneStyle={{paddingTop: 64}}
                navigationBar={this._renderNavBar()}
            />
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

3. listview的简单使用，在列表元素中使用TouchableOpacity来响应事件;
4. view/image/text/touchableopacity的简单使用和嵌套;

5. 结合flex和width/height进行布局; style实现样式；...的方式来快速传值（属性）;

6. 注意this的传递，在不使用箭头函数绑定的情况下，函数内容若要使用this则需要在外部bind(this).

7. 何时封装组件；如何封装简单组件；PropTypes来限定类型。

主要技术点就这些，是一个最基础的实现，代码大约300多行，这里的api需要翻墙才能访问（iOS项目还需要在plist里面允许http访问）。