菜鸟学学ReactNative笔记（二）

最新推荐文章于 2024-04-29 00:32:49 发布

小源子2016

最新推荐文章于 2024-04-29 00:32:49 发布

阅读量828

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/rnzuozuo/article/details/53157419

版权

ReactNative 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>
    )
}
}