组件

Props

图片属性

布局属性

position
width
zIndex
padding 单值
margin
overflow
maxHeight/Width
minHeight/Width
display
borderWidth
flex
flexDirection
flexGrow
flexShrink
flexBasis
flexWrap

阴影属性

shadowColor

Text属性

color
fontSize
fontWeight
lineHeight
textAlign
fontFamily
letterSpacing

View属性

border相关
opacity

核心组件

TextInput

Modal

ScrollView

记住 ScrollView 必须有一个确定的高度才能正常工作
ScrollView和FlatList应该如何选择？
FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。

StatusBar

控制显示或隐藏
控制dark或light

FlatList

SectionList

Switch

View

Text

Image

VirtualizedList

FlatList和SectionList的底层实现

TouchableOpacity

TouchableHighlight

封装带触摸的元素

API

Core

Vibration

StyleSheet

Platform

Keyboard

Alert

Share

Transforms

Appearance

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 用户开启了暗色模式
}

Dimensions

获取屏幕宽高

Hooks

useColorScheme

import React from 'react';
import { Text, StyleSheet, useColorScheme, View } from 'react-native';
const App = () => {
  const colorScheme = useColorScheme();
  return (
    <View style={styles.container}>
      <Text>useColorScheme(): {colorScheme}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
});
export default App;

文档

网络

可以使用axios

React Native 还支持WebSocket

原生模块

JS 环境

ES6

• 箭头函数 Arrow functions: this.setState({pressed: true})} />
• 块级作用域 Block scoping:let greeting = ‘hi’;
• 数组的扩展运算 Call spread:Math.max(…array);
• 类 Classes:class C extends React.Component { render() { return ; } }
• 常量 Constants:const answer = 42;
• 解构 Destructuring:var {isActive, style} = this.props;
• for…of:for (var num of [1, 2, 3]) {}
• 模块 Modules:import React, { Component } from ‘react’;
• 动态属性键 Computed Properties:var key = ‘abc’; var obj = {[key]: 10};
• 对象方法的简写 Object Consise Method:var obj = { method() { return 10; } };
• 对象属性的简写 Object Short Notation:var name = ‘vjeux’; var obj = { name };
• 参数的扩展运算 Rest Params:function(type, …args) { }
• 字符串模板 Template Literals:var who = ‘world’; var str = Hello ${who};

ES8

• 参数列表末尾允许放置逗号 Function Trailing Comma:function f(a, b, c,) { }
• 异步函数 Async Functions:async function doStuffAsync() { const foo = await doOtherStuffAsync(); };

Stage 3

• 对象的扩展运算 Object Spread:var extended = { …obj, a: 10 };
• Optional Chaining:var name = obj.user?.name;

Polyfills

浏览器

• console.{log, warn, error, info, trace, table, group, groupEnd}
• CommonJS require
• XMLHttpRequest, fetch
• {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame

ES6

• Object.assign
• String.prototype.{startsWith,endsWith,repeat,includes}
• Array.from
• Array.prototype.{find,findIndex}

ES7

• Array.prototype.{includes}

ES8

• Object.{entries,values}

交互

动画
导航
手势

设计

样式

宽高

React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

固定宽高
Flex 宽高
百分比宽高

Flexbox

https://reactnative.cn/docs/flexbox