菜鸟学学ReactNative笔记(二)

1.import React, { Component } from 'react';
通过实际的代码分析认为,{Component}意思应该是导入React中的子模块Component,这样在代码中省的写React.Component,而直接写Component即可

2.props和state的理解

props可以指定组件的特征,state可以动态改变组件的一些特征,而状态的改变或许可以触发

render吧

3.RN长宽单位默认对应DP:所谓与密度无关就是密度变化不引起物理尺寸的变化,这一点DP与RN官方说的一致,

参考1.   DP 百度百科http://baike.baidu.com/link?url=hXbrzXc6jXw7Qda35blb7yeKWNKgkKgMSLERPGE8PpNZd1betOcdheAuicNEdlBv

参考2:http://reactnative.cn/docs/0.37/height-and-width.html#content 官方解释与设备密度无关的

参考3:http://www.jianshu.com/p/fd40b448a9e3 里面说到reactnative默认采用的dp

4.Flex这个属性有点类似于安卓的weight

5.Flexbox布局

1.flexDirection有点类似安卓的LinerLayout属性,可以指定是横向还是纵向

2.justifyContent 在主轴上的散布间隔方式,例如space-between效果就是等分

3.alignItems 在次轴上的散布间隔方式

6.理解this.state = {text: ''};

这个的意思是在state对象上扩展出一个子对象,该对象默认值是空串

7.onChangeText={(text) => this.setState({text})}

(text)应该是方法的参数,后面的应该是简写,全写应该是this.setState({'text:'text})

至于onChangeText=后面是大括号,因为onChangeText是函数啊

8.&& 与运算符

和JAVA不同,JS中的&&运算符返回的并不是true和false

例如: 0 && 'b' 返回的是0;'a' && 'b'返回的是b,这里面用到只是&&短路功能

9.{this.state.text.split(' ').map((word) => word && '��').join(' ')}

split先分割为数组,map变量数组,并且做&&运算后返回对象(实际上应该是每个返回值重新组合的数组),然后执行join

JS map用法参考博客http://www.cnblogs.com/xuan52rock/p/4460949.html

其中说到map含义为映射,就是把原来的数组映射为新的数组,原来JS的写法为

var data = [1, 2, 3, 4];

var arrayOfSquares = data.map(function (item) {
  return item * item;
});

10.扩展一个静态属性是这么写的

static defaultProps = {
    title: 'MyScene'
  };

11.Navigator之页面跳转

这是一个导航,他通过路由集合(若干个路牌组成),我们往里面push一个路牌到达一个新的目的地,我们pop一个路牌回到上一个目的地

导航的数据结构是栈,就是带底盖的数据接口,先进后出

12.网络请求小例子

class HelloWorld extends React.Component {
// 初始化模拟数据
  constructor(props) {
    super(props);
    this.state = {
      dataSource: '1'
    };
  }
  getMoviesFromApiAsync() {
    return fetch('https://rxxx.do?type=0')
      .then((response) => response.json())
      .then((responseJson) => {
        return  this.setState({
                    dataSource: JSON.stringify(responseJson)
                });
      })
      .catch((error) => {
        console.error(error);
      });
  }
 
    /**
     * 加载耗时操作
     */
    componentDidMount() {
        this.getMoviesFromApiAsync('1');
    }

  render() {
    return (
      <Text>{this.state.dataSource}</Text>
    )
  }
}

Promise 表示一个未来会完成的事件对象,fetch返回的就是这个,好处是避免回调方式嵌套的太多啦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值