React Native 属性.样式.状态

一. HelloWord

1.初始化工程

react-native init Hello
cd Hello
react-native run-ios

这个有一点要注意，博主是在终端直接操作的，后来把文件移动到专门的React Native文件夹里，移动之后，之前创建的项目都运行不起来了，会出以下问题

 We couldn't boot your defined simulator due to an already booted simulator. We are limited to one simulator launched at a time.

 开始我以为系统那里有问题把写的项目都删了,移动回去之后又好了,以后再创建项目时，直接在对应文件夹中创建了(怎么在移动后仍然可以用,以后有时间在研究)
 

2.HelloWord

//引入React, 引入react中Component这一模块
import React, { Component } from 'react';
import {
    AppRegistry, //注册
    StyleSheet,  //样式
    Text,        //文本
    View         //视图
} from 'react-native';

//这是ES6的一种写法 创建了一个Hello的类继承Component
class Hello extends Component {
    // 初始化方法 --->相当于OC中的ViewDidLoad --->返回具体的组件内容
    //写结构和内容
    render() {
        //返回
        return (
            <Text>Hello world!</Text>
        );
    }
}
//export default关键字。它的意思是导出(export)当前组件，以允许其他组件引入(import)和使用当前组件
export default class FetchAPI extends Component {
}
/*  注意:
 1. 这里用引号括起来的'Hello'必须和你init创建的项目名一致
 2. AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。
 */
AppRegistry.registerComponent('Hello', () => Hello);

ReactNative中所有的变量都用{}来写

上面的示例代码中的import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。如果你不熟悉ES2015的话，可以看阮一峰老师的书(http://es6.ruanyifeng.com)，还有论坛的这篇总结。

示例中的这一行<Text>Hello world!</Text>叫做JSX——是一种在JavaScript中嵌入XML结构的语法。React设计的JSX语法却是让你在代码中嵌入结构标记。这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。

组件与AppRegistry
上面的代码定义了一个名为Hello的新的组件（Component），并且使用了名为AppRegistry的内置模块进行了“注册”操作。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在render方法中返回一些用于渲染结构的JSX语句。

二. Props（属性）
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。
我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据用state。

以常见的基础组件Image为例，在创建一个图片时，传入两个prop。
1) source: 指定要显示的图片的地址;  
2) style: 来控制其尺寸。

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

class Hello extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <Image source={pic} style={{width: 200, height: 120}} />
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

译注：在iOS上使用http链接的图片地址可能不会显示，[参见这篇说明修改](https://segmentfault.com/a/1190000002933776)。

请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。

自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。下面是一个例子：

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


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

class Hello extends Component {
    render() {
        return (
            <View style={{alignItems: 'center'}}>
            //在Greeting组件中将name作为一个属性来定制，这样可以复用这一组件来制作各种不同的“问候语”。
              <Greeting name='欢迎来到' />
              <Greeting name='React native' />
              <Greeting name='学习中' />
            </View>
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

上面的例子把Greeting组件写在JSX语句中，用法和内置组件并无二致。
View - 组件。View 常用作其他组件的容器，来帮助控制布局和样式。
仅仅使用props和基础的Text、Image以及View组件，你就已经足以编写各式各样的UI组件了。


三. State（状态）

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

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

class HelloApp extends Component {
    constructor(props) {
        super(props);
        this.state = { showText: true };
        // 每1000毫秒对showText状态做一次取反操作
        setInterval(() => {
            this.setState({ showText: !this.state.showText });
        }, 1000);
    }
    render() {
        // 根据当前showText的值决定是否显示text内容
        let display = this.state.showText ? this.props.text : ' ';
        return (
            <Text>{display}</Text>
        );
    }
}
class Hello extends Component {
    render() {
        return (
            <View>
              <HelloApp text='I love to blink' />
              <HelloApp text='Yes blinking is so great' />
              <HelloApp text='Why did they ever take this out of HTML' />
              <HelloApp text='Look at me look at me look at me' />
            </View>
        );
    }
}
AppRegistry.registerComponent('Hello', () => Hello);

实际开发中，我们一般不会在定时器函数（setInterval、setTimeout等）中来操作state。典型的场景是在接收到服务器返回的新数据，或者在用户输入数据之后。你也可以使用一些“状态容器”比如Redux来统一管理数据流（译注：但我们不建议新手过早去学习redux）。
State的工作原理和React.js完全一致，所以对于处理state的一些更深入的细节，你可以参阅[React.Component API](http://example.com/)。

四 .Style(样式)
所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

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

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

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

export default class StyleAndProps extends Component {
  render() {
    return (
      <View style={styles.container}>
          {/*<Text style={[styles.title,{fontStyle:'italic' }]}>*/}
          {/*<Text style={styles.title}>
          Welcome to React <Text style={{fontWeight:'600'}}>Native!</Text>
        </Text>*/}
       <HeaderText>
         Welcome to React
       </HeaderText>

      </View>
    );
  }
}
//在主文件上创建一个显示文本的组件(自定义组件)
class HeaderText extends Component {
    render() {
        return (
            <Text style={styles.title}>
                {/*在这个组件中显示的文字就是: this.props.children */}
                {this.props.children}
              </Text>

        );
    }
}
const styles = StyleSheet.create({
  //常用样式
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginBottom:20,

    margin :30,
    borderColor:'#6435c9',
    borderWidth:1,
    shadowColor:'#6435c9',
    shadowOpacity:0.6, //阴影不透明度
    shadowRadius:2, //阴影半径
    shadowOffset: {
        height:1,
        width:0
      },
    marginLeft: 20,
    marginRight: 20,
   // marginTop:40
      paddingTop:130
  },
// 文字样式
    title:{
    fontSize:20,
    color:'#6435c9'   ,
    textAlign:'center', //文本对齐方式
    fontStyle:'italic' ,//字体样式
    letterSpacing:2 ,//字间距
    lineHeight:33,   //行间距
    fontFamily:'Helvetica Neue',
    fontWeight:'300', //文字的粗细,粗体,细体或者300等
    textDecorationLine:'underline',//设置下划线或者删除线(line-through)
    textDecorationStyle:'dashed' //线的样式:实线(solid),双实线(double),点线(dotted),虚线(dashed)
    }
});

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