【ReactNative】使用总结

头像
看见了
    阅读 6 分钟
    1
    记录学习 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-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-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();

    参考文章

    react-native
    看见了
    876 声望16 粉丝

    前端开发，略懂后台；

    « 上一篇
    【音视频】RTCP
    下一篇 »
    【React】基础

    引用和评论

    推荐阅读
    头像
    添加cmd和powershell到右键菜单的一键脚本

    看见了阅读 555

    头像
    ReactNative开发笔记（持续更新...）

    kovli阅读 5.1k

    头像
    通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

    ShaoGongBra阅读 3.5k

    头像
    React Native 0.76：重大更新引领移动开发新潮流

    白水赞 1阅读 457

    头像
    鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙

    zacks阅读 777

    头像
    鸿蒙Flutter实战：01-搭建开发环境

    zacks阅读 441

    头像
    H5跳转到 React Native App

    perkz阅读 404

    0 条评论
    得票最新