文档章节

React Native 学习笔记1

芳仔小脚丫
 芳仔小脚丫
发布于 2016/12/27 19:27
字数 615
阅读 130
收藏 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(横向排列)

FlexDirection.png-9.5kB

  • Justify Content (主轴的填充方式)

  • flex-start

  • center

  • flex-end

  • space-around

  • space-between

  • Align Items

  • flex-start

  • center

  • flex-end

  • stretch

All.png-39.2kB

上图是我理解的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| 写读书笔记 |

© 著作权归作者所有

芳仔小脚丫
粉丝 930
博文 83
码字总数 76301
作品 0
闵行
程序员
私信 提问
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、导航使用 虽然系统有Navigator可以用,但是0.44版本后就不在推荐使用,而是让我...

摸着石头过河_崖边树
2018/12/28
0
0
ReactNative从零开始笔记4-PropTypes使用

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、PropTypes的简介 1.自定义组件的时候暴露属性到外界时候,外界调用组件具有属性...

摸着石头过河_崖边树
01/17
0
0
ReactNative从零开始笔记3-state(状态)与props(属性)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、 props(属性) ReactNative(React)使用两种数据来控制一个组件:props 和 stat...

摸着石头过河_崖边树
01/18
0
0
React Native 学习指南

本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 原文地址:https://github.com/ele828/react-native-guide 同时还有Awesome...

OSC编辑部
2015/07/09
5K
9
Windows平台React Native + Android 环境

个人不太成熟的理解而做的笔记 NodeJS安装 1、下载地址:http://nodejs.cn/2、双击, 按提示安装。 Python安装 1、目录react-native v0.22.2 依赖 低于python 3.x的版本。2、下载地址:https...

刘草
2016/04/01
295
0

没有更多内容

加载失败,请刷新页面

加载更多

读书replay《maven实战》.1.20190526

前情提要 maven这个工具用了好久了,但是一直都用的迷迷糊糊的,没有对它进行过系统性的学习,只是知道一些常用的功能怎么实现,所以20190516这一天我从JD购买了徐晓斌老师所著的《maven实战...

wanxiangming
29分钟前
0
0
真实项目案例实战——【状态设计模式】使用场景

什么是状态模式 状态模式允许一个对象在其内部状态改变的时候改变其行为。这个对象看上去就像是改变了它的类一样。 状态模式应用场景 1.一个对象的行为取决于它的状态,并且它必须在运行时刻根...

须臾之余
36分钟前
0
0
Java 实现把字符串转换成整数【底层实现】

https://blog.csdn.net/zl18310999566/article/details/80263396

qimh
39分钟前
0
0
IDEA的debugger

1、win下节省内存空间 3、条件断点

一只小青蛙
50分钟前
3
0
炸!亿级数据DB秒级平滑扩容

一步一步,娓娓道来。 一般来说,并发量大,吞吐量大的互联网分层架构是怎么样的? 数据库上层都有一个微服务,服务层记录“业务库”与“数据库实例配置”的映射关系,通过数据库连接池向数据...

编程SHA
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部