DayDay's Studio.

React Native 文档基础部分小结

react-native
字数统计: 585阅读时长: 2 min
2020/03/10 Share

非常鼓励看原文文档，目前文档内容特别完善。以下是我在看文档的基础部分的时候顺手记录的内容。

使用的脚手架

官方文档提示有两种选择

  • expo cli
  • react native cli

虽然 expo cli 的安装上比较麻烦，但是从开发的角度来看，expo cli 方便很多，在手机上的预览完全可以依靠 Expo App 来实现，完全不需要再在电脑上下载模拟器。

React Native Component

React 没有自己的元件，但是 React Native 有，借助这些基础元件帮助我们实现快速开发，实现网页端和手机端的互通。

Style

React Native 对这部分内容有扩充：

  • 新增了 StyleSheet.create，方便对组件样式的统一管理
    • 其中 key 的名字参考 css 的样式名，只不过要修改成驼峰型，value 参照 css 的值。
  • React Native 基础组件都有 style prop，用来设定组件的样式
    • 这个 prop 的值可以是 Object，也可以是一个 Array。如果是 Array，越靠后的样式级别越高。
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
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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>
    );
  }
}

Height and Width

主要介绍两种方式来设定组件的大小，知道 css 的话这部分内容就很好理解：

  • 设定固定值：
    • 设定 style 的 width 和 height
  • 动态设定：
    • 用 flex 进行设定

Layout with Flexbox

主要详细说明 flex 的相关设定，知道 css 的 flex 的话这部分内容就很好理解。主要区别如下：

  • React Native 中的 flexDirection 默认为 column
  • React Native 中的 flex 只能接受一个数字作为其值

这里还介绍了 width 和 height 的值的类型（和 传统 css 有出入）

  • auto
    • 默认值
  • 像素
  • 百分数

这里还介绍了 position 的值（和传统 css 有出入）

  • absolute
  • relative
    • 默认值。这里需要注意，传统的 css，staitc 才是默认值

原文作者：DayDay

原文链接：https://trcat.github.io/2020/03/10/React-Native-%E6%96%87%E6%A1%A3%E5%9F%BA%E7%A1%80%E9%83%A8%E5%88%86%E5%B0%8F%E7%BB%93/

发表日期：March 10th 2020, 7:52:25 pm

更新日期：December 13th 2021, 10:35:58 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 使用的脚手架
  2. 2. React Native Component
  3. 3. Style
  4. 4. Height and Width
  5. 5. Layout with Flexbox
Total : 20
2021
2020
Apple Music iPhone css 前端 echarts Git 搬运 SVG WebFont 工具 javascript es6 react-native react html svg canvas jquery vue 转载 欢迎
手机应用 计算机技术 闲谈 置顶