React Native入门到怀疑人生（三）

发表于 | 分类于 | 本文总阅读量 次

欢迎收听React Native系列，基于Window10,偏向于Android端的React Native。上一章React Native入门到怀疑人生（二）我们已经成功运行了官方Demo，介绍了React.js、ES6相关学习资料，推荐了开发RN的编辑器，那么本章节将讲解RN的props属性，state状态，样式相关知识。本章将使用ES6语法。请各位系好安全带，本章节我们将真正开始RN的开发。嘀！老年卡。文章不当之处，希望大家及时指出，多谢！

准备工作

  • 新建一个react Project，用于我们本章内容讲解
    note:react-native init "ProjectName"

  • webstorm安装RN提示插件

  • 使用webstorm打开，

Props（属性）讲解

组件（可以理解为Android的控件）在创建的时候，我们都会赋予相应的参数，这些参数就相当于props(属性)，还是上代码吧，代码理解起来简单点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* *-------------props-------------**/
import React, {Component} from 'react';
/**
 * ES6语法，等价与ES5中的
 * var AppRegistry = require('./AppRegistry');
 */
import {AppRegistry, Image} from 'react-native';
class HelloReact extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    /**
     * source就是定义的属性名称，同时通过定义的pic变量给它赋值，控制展示的图片资源
     * 通过style的props来控制图片的尺寸
     */
    return(
      <Image source= {pic} style = {{width : 500 , height: 500}}/>
    );
  }
}
AppRegistry.registerComponent('FirstRNProject', () => HelloReact);

代码中已添加注释

代码中的{ { pic } }是JSX语法,JSX语法的基本规则如下

  • 1 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
  • 2 JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
  • 3 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求(可以了解下)

代码中的 import {AppRegistry, Image} from 'react-native'为ES6语法等价与ES5中的var AppRegistry = require('./AppRegistry')

代码中registerComponent()方法的第一个参数'FirstRNProject'必须和android\app\src\main\java\com\firstrnproject\MainActivity类中的getMainComponentName()方法返回的String保持一致

state（状态）讲解

我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。

一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。

摘自ReactNative中文网，这段话对state的描述非常透彻。
这里补充一点getInitialState方法在很多现有的库中发现此类写法，其实就是对state进行赋值的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**---------------- state------------**/
import React, {Component} from 'react';
import {AppRegistry, Text, View} from 'react-native';
class Blink extends Component {
  constructor(props) {
    super(props);
	//初始化状态值
    this.state = { showText : true};
    //开启定时任务，隔1s取反状态值
    setInterval(() => {
      this.setState(previousState =>  {
        return {showText:!previousState.showText};
      })
    }, 1000);
  }
  render() {
    let display = this.state.showText? this.props.text:'';
    return (
        // 根据当前showText的值决定是否显示text内容，布局会根据属性值自动重新渲染text
      <Text>{display}</Text>
    );
  };
}
class BlinkApp extends Component{
  render() {
    return(
      <View>
        <Blink text = 'I Love You'/>
        <Blink text = 'I Love You'/>
        <Blink text = 'I Love You'/>
        <Blink text = 'I Love You'/>
      </View>
    );
  }
}
AppRegistry.registerComponent('FirstRNProject', () => BlinkApp);



代码中的=>箭头函数为ES6语法可参考下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ES5  
var selected = allJobs.filter(function (job) {  
  return job.isSelected();  
});  
  
// ES6  
var selected = allJobs.filter(job => job.isSelected());  
~~~
~~~
/ ES5  
$("#btn").click(function (event) {  
  dosomeing.... 
});  
// ES6  
$("#btn").click(event => {  
  dosomeing....
});

😂不会录gif,后期补充

样式

在React Native中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的JavaScript对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/****--------------------style-------------**/
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class LostOfStyles extends Component {
  render() {
    return(
      <View>
        <Text style={style.bigblue}>bigblue</Text>
        <Text style={style.red}>red</Text>
        <Text style={[style.red, style.bigblue]}>red, then bigblue</Text>
        <Text style={[style.bigblue, style.red]}>bigblue, then red</Text>
      </View>
    );
  }
}
//按顺序声明和使用style属性
const style = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color:'red',
  },
});
AppRegistry.registerComponent('FirstRNProject', ()=> LostOfStyles);


样式基本使用和JavaScript里面的使用一样，暂时不做赘述。

##参考资料