规范

• 默认容器是 Flex 布局
• Css 没有继承作用
• Css 单位没有 px / vh / vw ; 可以会使用 ‘%’;
• Css 属性均为大驼峰命名法
• 获取屏幕宽度 Dimensions

import {Dimensions} from "react-navite"
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height

---

变换

以数组的形式使用

<view style={{transform:[{tarnslateY:300},{scale:2}]}}>
    <Text></Text>
</view>

标签

View

• 相当于div
• 不能存放文本内容，不支持设置字体大小和颜色
• 不能直接绑定点击事件

Text

• 文本标签
• 可支持文本设置大小和颜色，可直接绑定单击事件

TouchbleOpacity

• 块级容器
• 支持文本设置大小和颜色，可直接 onPress 事件，可以设置点击事件的样式
• 属性
  • onPress 点击事件
  • activeOpacity 交互的透明度 0-1

Image

• 本地图像 { require(“url”) }
• 在线图像 {{ url }} ， 在线图片需要在 style 中设置宽高

gif图像配置

在 Android 上支持 GIF 和 WebP 格式图片

在默认情况下 Android 是不支持 GIF 和 Webp 格式的， 需要在 android/app/build.gradle 文件中根据需要手动添加一下模块

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'
​
  // 如果你需要支持GIF动图
  implementation 'com.facebook.fresco:animated-gif:2.0.0'
​
  // 如果你需要支持WebP格式，包括WebP动图
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
​
  // 如果只需要支持WebP格式而不需要动图
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

Imagebackgroumd

• 背景图片用法同 image 相同

TextInput

• 输入组件
• 通过 onChangeText 事件来获取输入框的值，同 change 事件相同

---

语法

1. RN 支持插值表达式语法，用法同react 相同
2. RN 支持类组件和函数组件（Hooks）
3. state 和 props 用法同 react 相同
4. 事件绑定方式同 react 相同
5. 生命周期同 react 相同

---

调试

推荐方式使用 React-Native-debugger

投屏工具 scrcpy

调试网络请求 RN-Debugger 右键 Enable Network Inspect 开启监听网络请求