Android React-Native 入门笔记（一）理解Pr

内容摘自：
React-Native中文
下面是显示一个简单的例子

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

可以看到上面有两个继承自Component的class
1: Greeting 2: LotsOfGreetings
它们都重写一个render()的方法，在render方法里面最重要的是retrun (){};里面的代码<Text>Hello {this.props.name}!</Text>这是官方介绍的一段重要概念JSX的示例代码。return属于类似js(为了方便以后都将javascript简称为js)的语言而return里面的语句是类似于XML的语言

        <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
        </View>

写过Android布局的文件的朋友看里面的标签名字就可以很轻松的将这两者联系到，而里面的name属性就是上面所指定的

<Text>Hello {this.props.name}!</Text>

而这句代码<Greeting name='Rexxar'>将像函数一样将name的值传递了过去，复用了上面的Gretting类，只不过这种方式是以XML语言的形式来引入的。最后附上一张运行过后的效果图。

device-2018-02-28-162312.png

State(状态)

作为RN重要的一个数据，State在组件容器的构造函数就应初始化。State适用于监听一些变化来实现控制。下面是例子：

import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
       constructor(props){
           super(props);
           this.state{ showText: true};
           setInterval(() => {
                 this.setState(previousState => {
                 return { showText: !previousState.showText }; });
           },1000};
        }
      render(){
            let display = this.state.showText?this.props.text:'';
            return {<Text>{display}</Text>};
      }
}

export default class BlinkApp extends Component{
    render(){
        return{
                 <View>
                 <Blink text='I love to blink' />
                 <Blink text='Yes blinking is so great' />
                 <Blink text='Why did they ever take this out of HTML' />
                 <Blink text='Look at me look at me look at me' />
                 </View>
                };
          }
}

样式

和CSS的样式编写方式类似，只不过RN遵循驼峰命名法。

style属性可以是一个普通的JavaScript对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。

比如像下面这样：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

后面的属性会覆盖前面的属性。