React Native 学习笔记1

装环境装了挺久的，断断续续的，今天才开始看文档学习一些基础语法，中文文档 React Native 0.39

index.ios.js

类似 iOS 中的 AppDelegate，UI 从这里开始

import React,{ Component } from 'react';

所有的 class 都继承自这个 Component

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

这里的 AppRegistry 是必选项，其他的根据需要选择，Text 是文本（UILabel），View 是视图（UIView）

然后是 class，在这里写 UI 或是其他逻辑，格式为

class className extends Component {
  render() {
    return (
      // 布局逻辑等
    );
  }
}

末尾需要 register

AppRegistry.registerComponent('projectName',() => className);

这里前面的 projectName 不变，希望主视图加载哪个类就在 => 填哪个类名

Props

Props 就是参数，类似 Property，只是不需要像 OC 中声明时在前面声明关键字

State

说实话，就看了文档中的一个小demo，我真的不是很明白 state 的作用，是一个关键字，好像就是一个 Bool 的变量，可能要后面实际使用才能知道什么意思吧

StyleSheet

定义 UI 的一些样式，比如颜色，字体等，应该也可以定义坐标之类的，示例中只有字体大小颜色和字体权重

需要 import StyleSheet

定义一些样式

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

在使用时 直接

style={styles.red}

就可以 不定义成const 常量，直接写的时候

style={{Text: 'red',backgroundColor: 'powderblue'}}

布局

宽高直接在 style 中指定即可，布局方向及在视图上的填充方式可以通过 Flexbox 来布局，是一种弹性地相对布局，非常简单

<View style={{flex: 1,flexDirection: 'row'}}>

三个关键字 flexDirection,justifyContent,alignItems

• Flex Direction （主轴）

• column（纵向排列，默认）

• row（横向排列）

• Justify Content （主轴的填充方式）

• flex-start

• center

• flex-end

• space-around

• space-between

• Align Items

• flex-start

• center

• flex-end

• stretch

上图是我理解的justifyContent 和 alignItems 的值所表示的意思，横向和纵向都标出了

flexDirection 用来控制视图是横向还是纵向排列 justifyContent 用来控制 flexDirection 指定方向的布局方式 alignItems 用来控制 flexDirection 未指定的方向的布局方式，如果 flexDirection 为 column，则 justifyContent 控制 column，alignItems 则控制横向

宽高指定的情况下 stretch 无效

学习日志

2016.12.27

|时间段|内容| |-|-| |15:56-16:52| Hello world,props,state,样式| |16:58-17:50| 高度与宽度，Flexbox | |17:50-19:21| 写读书笔记 |

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!