React Native 中文文档

组件

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 环境

• 箭头函数 Arrow functions<C onPress={() => this.setState({pressed: true})} />
• 块级作用域 Block scopinglet greeting = 'hi';
• 数组的扩展运算 Call spreadMath.max(...array);
• 类 Classesclass C extends React.Component { render() { return ; } }
• 常量 Constantsconst answer = 42;
• 解构 Destructuringvar {isActive, style} = this.props;
• for...offor (var num of [1, 2, 3]) {}
• 模块 Modulesimport React, { Component } from 'react';
• 动态属性键 Computed Propertiesvar key = 'abc'; var obj = {[key]: 10};
• var obj = { method() { return 10; } };
• 对象属性的简写 Object Short Notationvar name = 'vjeux'; var obj = { name };
• 参数的扩展运算 Rest Paramsfunction(type, ...args)
• 字符串模板 Template Literalsvar who = 'world'; var str = Hello ${who};

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

• 对象的扩展运算 Object Spreadvar extended = { ...obj, a: 10 };
• Optional Chainingvar 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

• Object.assign
• [startsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)[endsWith](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)[repeat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat)[includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes)
• Array.from
• [find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)[findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)

• [includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

• [entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)[values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)

交互

动画

导航

手势

设计

样式

宽高

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

固定宽高

Flex 宽高

百分比宽高

Flexbox

https://reactnative.cn/docs/flexbox

更新: 2021-05-20 10:48:45
原文: https://www.yuque.com/u3641/dxlfpu/ts29b3