【ReactNative】使用总结

看见了
记录学习 RN 的文档,比较随意

一、搭建开发环境

基本上按照官网的文档一步步来即可,注意需要科学上网

请不要使用一些移植的终端环境,例如 git bash 或 mingw 等等,这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行(CMD 或 powershell)运行。

创建项目

npx react-native init AwesomeProject --version X.XX.X

version 指定版本 0.67.4 版本需要 JDK1.8

0.68 以后版本需要 JDK11

手机投屏工具

手机投屏工具,方便直接在电脑观看效果,缺点是需要数据线连接

样式

StyleSheet提供了一种类似 CSS 样式表的抽象。

常量

  • hairlineWidth

这一常量始终是一个整数的像素值(线看起来会像头发丝一样细),并会尽量符合当前平台最细的线的标准。可以用作边框或是两个元素间的分隔线。然而,你不能把它“视为一个常量”,因为不同的平台和不同的屏幕像素密度会导致不同的结果。

StyleSheet.hairlineWidth
// 一般
1 / PixelRatio.get()
  • absoluteFill

一个非常常见的创建具有绝对位置和零位置的叠加层样式,因此可以使用absoluteFill来方便并减少那些不必要的重复样式。

等价于

position: 'absolute', left: 0, right: 0, top: 0, bottom: 0
  • absoluteFillObject

跟absoluteFill几乎没区别

Flex布局

  • 所有的容器默认布局都是 Flex
  • flex-direction: column(默认)
  • RN 中样式无法继承, (补充: React Native 实际上还是有一部分样式继承的实现,不过仅限于文本标签的子树。)

RN的FlexBox与Web的FlexBox的不同

  • flexDirection: React Native中默认为flexDirection:'column',在Web CSS中默认为flex-direction:'row'
  • alignItems: React Native中默认为alignItems:'stretch',在Web CSS中默认align-items:'flex-start'
  • flex: 相比Web CSS的flex接受多参数,如:flex: 2 2 10%;,但在 React Native中flex只接受一个参数
  • 不支持属性:align-contentflex-basisorderflex-basisflex-flowflex-growflex-shrink

注意:在使用Flex布局时,每个View尽可能指定宽度,避免出现奇怪的样式问题。

单位

  • 数值, 单位是dp,无法使用 px,vw,vh 等
  • 百分比
  • PPI(DPI)大多数状况下这两种是相等的,即 PPI = DPI。PPI 是屏幕像素与设备的比值:PPI =屏幕对角线像素点/屏幕对角线物理宽度。
  • DPI(dots per inch)打印精度 (每英寸所能打印的点数)字体
  • dp(dip)(Density-independent pixels)一种基于屏幕密度的抽象单位。在每英寸 160 点的显示器上,1dp = 1px。特别须要注意 dp 是相对长度单位,简单的说 1dp 在不一样的屏幕或者不一样的 ppi 下展现出来的“物理长度”可能不一致。
  • px 像素点。也是相对长度
  • in(inch)英寸。物理长度

Transform

transform 属性值接收的是数组

<View
  style={
    {
      transform: [{ scaleY: 2 }],
    },
  }
>
  <Text>ScaleY by 2</Text>
</View>

View

View 是一个支持 Flexbox 布局、样式、触摸响应、和一些无障碍功能的容器。
  • 不支持设置字体样式
  • 不能直接绑定点击事件(使用TouchableOpacity

Text

一个用于显示文本的 React 组件,并且它也支持嵌套、样式,以及触摸处理。

注意: <Text>元素在布局上不同于其它组件:在 Text 内部的元素不再使用 flexbox 布局,而是采用文本布局。这意味着<Text>内部的元素不再是一个个矩形,而可能会在行末进行折叠。

Image

  • Image组件加载项目中的静态资源

在这里的静态资源指的是加载的js部分的图片,非android,ios原生应用下的资源文件,对于加载这种图片资源,我们通过require(‘图片文件相对本文件目录的的路径’)引入图片文件,并将其设置到Image组件的source属性即可。如下

<Image
    style={styles.image}
    //   ./表示当前文件目录 ../ 父目录
      source={require('./reactlogo.png')}
/>
  • 加载原生图片资源

原生资源指的我们开发android的时候再res目录下的drawable,或者mipmap目录。

<Image
 source={{uri: 'launcher_icon'}}
 style={{width: 38, height: 38}}
/>;
  • 加载网络图片
 <Image
 source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
 style={{width: 38, height: 38}}
/>);

注意: 对于加载网络图片需要注意的一点就是,需要指定样式的宽和高,否则图片将不显示(不设置默认宽和高为0了)

更换APP图标

可以用工具批量生成,现在需要一张1024*1024的母版即可。
图标生成工具

  • IOS

把下载好的IOS图标拖到Imagees.xcassets / AppIcon文件夹中,xcode会自动根据图片的大小匹配图标,如果有些图标出现黄色的警告,删掉即可.

  • Android

/android/app/src/main/res 目录下 一堆mipmap目录,替换掉以下相应目录中的ic_launcher.png就可以

StatusBar

  • 设置状态栏透明
useEffect(() => {
  StatusBar.setBarStyle('dark-content');
  Platform.OS === 'android' && StatusBar.setBackgroundColor('transparent');
  StatusBar.setTranslucent(true);
}, []);

或者

<StatusBar translucent backgroundColor="transparent" />

常用的包

Icon

react-native-vector-icons

npm install --save react-native-vector-icons
  • Android

编辑android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

要自定义要复制的文件,添加以下内容:

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

SVG

swiper

启动页

待补充

导航

调试

路由

入门先直接看中文即可

文本输入

TextInput

<TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={text => setText(text)}
        defaultValue={text}
      />

滚动视图

长列表

特定平台

  • 使用 Platform 模块.
import { Platform, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  height: Platform.OS === "ios" ? 200 : 100,
});

Platform.OS 在 iOS 上会返回 ios,而在 Android 设备或模拟器上则会返回 android。

  • 使用特定平台扩展名.

ScrollView适合用来显示数量不多的滚动元素。放置在 ScrollView 中的所有组件都会被渲染,哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表,那么应该使用功能差不多但性能更好的FlatList组件。

ActivityIndicator

显示一个圆形的 loading 提示符号。

Button

FastList

Image

默认情况下 Android 是不支持 GIF 和 WebP 格式的

KeyboardAvoidingView

本组件用于解决一个常见的尴尬问题:手机上弹出的键盘常常会挡住当前的视图。本组件可以自动根据键盘的高度,调整自身的 height 或底部的 padding,以避免被遮挡。

Modal

PermissionsAndroid

PermissionsAndroid

PermissionsAndroid 可以访问 Android M(也就是 6.0)开始提供的权限模型。有一些权限写在AndroidManifest.xml就可以在安装时自动获得,但有一些“危险”的权限则需要弹出提示框供用户选择。本 API 即用于后一种情形。

在低于 Android 6.0 的设备上,权限只要写在AndroidManifest.xml里就会自动获得,此情形下check会始终返回true和而request方法将始终解析为PermissionsAndroid.RESULTS.GRANTED

需要用户提示的权限:

  • READ_CALENDAR: 'android.permission.READ_CALENDAR'
  • WRITE_CALENDAR: 'android.permission.WRITE_CALENDAR'
  • CAMERA: 'android.permission.CAMERA'
  • READ_CONTACTS: 'android.permission.READ_CONTACTS'
  • WRITE_CONTACTS: 'android.permission.WRITE_CONTACTS'
  • GET_ACCOUNTS: 'android.permission.GET_ACCOUNTS'
  • ACCESS_BACKGROUND_LOCATION: 'android.permission.ACCESS_BACKGROUND_LOCATION`
  • ACCESS_FINE_LOCATION: 'android.permission.ACCESS_FINE_LOCATION'
  • ACCESS_COARSE_LOCATION: 'android.permission.ACCESS_COARSE_LOCATION'
  • RECORD_AUDIO: 'android.permission.RECORD_AUDIO'
  • READ_PHONE_STATE: 'android.permission.READ_PHONE_STATE'
  • CALL_PHONE: 'android.permission.CALL_PHONE'
  • READ_CALL_LOG: 'android.permission.READ_CALL_LOG'
  • WRITE_CALL_LOG: 'android.permission.WRITE_CALL_LOG'
  • ADD_VOICEMAIL: 'com.android.voicemail.permission.ADD_VOICEMAIL'
  • USE_SIP: 'android.permission.USE_SIP'
  • PROCESS_OUTGOING_CALLS: 'android.permission.PROCESS_OUTGOING_CALLS'
  • BODY_SENSORS: 'android.permission.BODY_SENSORS'
  • SEND_SMS: 'android.permission.SEND_SMS'
  • RECEIVE_SMS: 'android.permission.RECEIVE_SMS'
  • READ_SMS: 'android.permission.READ_SMS'
  • RECEIVE_WAP_PUSH: 'android.permission.RECEIVE_WAP_PUSH'
  • RECEIVE_MMS: 'android.permission.RECEIVE_MMS'
  • READ_EXTERNAL_STORAGE: 'android.permission.READ_EXTERNAL_STORAGE'
  • WRITE_EXTERNAL_STORAGE: 'android.permission.WRITE_EXTERNAL_STORAGE'

Android 常用权限和使用说明

Geolocation

{
  "coords": {
    "accuracy": 40,
    "altitude": 0,
    "altitudeAccuracy": 0,
    "heading": 0,
    "latitude": 23.181484,
    "longitude": 113.448776,
    "speed": 0
  },
  "mocked": false,
  "provider": "network",
  "timestamp": 1649444050101
}

ReactNative 动画

import { UIManager } from "react-native";

if (UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

应该写在任何组件加载之前,比如可以写到 index.js 的开头。

1px问题

import { PixelRatio } from "react-native"

const onePixelRatio = 1 / PixelRatio.get();

参考文章

阅读 528

solfKwolf的前端杂记
涉及个人学习心得与经验

i'm look for a good job :)

568 声望
10 粉丝
0 条评论

i'm look for a good job :)

568 声望
10 粉丝
文章目录
宣传栏