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

来源：互联网发布：生物信息 python 编辑：程序博客网时间：2024/04/26 05:54

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

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访问）。

0 0