React native新手入门

前几天刚贴贴撞撞把react-native环境配置好，然后开始学习raect native。到目前为止，熟悉了下一些简单的控件的基础应用。在照着官方的文档写电影列表的时候（React Native中文网中的电影列表），最开始粗略浏览了一边，然后把最后的最终代码复制粘贴到了编辑器了，然后出错了，很懵！于是我开始自己照着它一步一步的敲，最终发现了最后的最终代码的坑。这也是给我的学习提了一个醒，不要想着抄近路，还是要一步一步的来。这样才能学习到更多的东西，而且不会遇到所谓的坑。回头细想一下，感觉最终的那个代码是故意搞的一点小错误，为的就是怕我直接复制粘贴吧！啊哈哈。

它的最终代码的这个部分的movie应该替换成renderMovie里面传入的参数item,就是此处导致我第一遍复制粘贴的时候报错。

我自己一个字一个字敲的代码

import React,{Component } from 'react';
import {Image,StyleSheet,Text,View,FlatList}from "react-native";

var REQUEST_URL =
    "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class Discount extends Component {
    constructor(props){
        super(props);
        this.state ={
            data:[],
            loaded:false,
        };
        this.fetchData = this.fetchData.bind(this);
    }

    componentDidMount(){//componentDidMount是React组件的一个生命周期的方法，它会在组件钢刚加载完成的时候调用一次，以后都不会再被调用
        this.fetchData();
    }

    fetchData(){
        fetch(REQUEST_URL)
            .then((response)=>response.json())
            .then((responseData)=>{
                //注意，这里使用了this关键字，为了保证this在调用时仍指向当前组件，我们需要对其进行“绑定”操作
                this.setState({
                    data:this.state.data.concat(responseData.movies),
                    loaded:true,
                });
            });
    }

    render() {

        if (!this.state.loaded) {
            return this.renderLoadingView();
        }


        return(
            <FlatList
                data = {this.state.data}
                renderItem={this.renderMovie}
                style={styles.list}
            />
        );

    }





    renderLoadingView(){
        return(
            <View style={styles.container}>
                <Text>Loading movies...</Text>
            </View>
        );
    }


    renderMovie({item}){
        return(
            <View style = {styles.container}>
                <Image source={{uri:item.posters.thumbnail}} style={styles.thumbnail}/>
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.year}>{item.year}</Text>
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,//让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
        flexDirection:'row',
        justifyContent: 'center',//项目位于容器的中心
        alignItems: 'center',//元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
        backgroundColor: '#F5FCFF',
    },
    thumbnail: {
        width: 53,
        height: 81
    },
    rightContainer:{
        flex:1,
        backgroundColor:'#dfe237',
    },
    title:{
        fontSize:20,
        marginBottom:8,
        textAlign:'center',
    },
    year:{
      textAlign:'center'
    },
    list:{
      paddingTop:20,
      backgroundColor:'#F5FCFF',
    },
});

运行的结果图

加载界面：                                                                             列表界面：

                                                       

通过这个简单的例子，我作为一个新手，学习到了

1.布局，通过styles声明的各种修饰的文件，需要用的时候直接在控件里调用即可，其次是Flexbox弹性布局（当然是基础的布局咯）

2.代码的风格，简单明了，style写一块，组件写一块，函数又是写在一块

3.state以及setState,在 React 的工作机制下，setState实际上会触发一次重新渲染的流程,即通过state的改变，来进行reader的流程的改变

4.绑定操作，在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向不对

5.学习是各循序渐进的过程，容不得半点偷懒，敲代码是个积累的过程，容不得“无脑的复制粘贴”哟！