乐趣区

关于react-native:React-Native开发初体验

环境装置

参见官网:

https://reactnative.dev/docs/environment-setup

https://reactnative.cn/docs/environment-setup

Notes

  • 针对依赖 Node 外围的包,RN 没有进行解决,须要借助 rn-nodeify 解决,e.g. https://github.com/mvayngrib/react-native-crypto
  • 针对 Java 依赖的版本问题,能够借助 jetifier 主动解决大部分的版本差别
  • 针对 Java 依赖版本问题,能够通过 patch-package 打补丁

    • 打出的补丁会蕴含很多无用的局部,能够选择性删除
    • 打出的补丁可能二次批改,e.g.https://github.com/browserify/pbkdf2/blob/master/lib/default-encoding.js

      • 源码中 global.process && global.process.version,装置后global.process && global."v16.13.0"patches/pbkdf2+3.1.2.patch 须要二次批改

我的项目创立

npx react-native@latest init rnProject

Notes:项目名称只反对驼峰,不反对连字符。

我的项目运行

npm run android

  • 往模拟器或真机装置 APK:包运行所须要的资源。
  • 援用原生依赖,须要从新运行该命令。
  • --mode=release长期打包,输入门路android\app\build\outputs\apk\release

npm run start

  • 运行 Metro 打包 JS 代码,启动热更新,在模拟器或真机实时查看改变。
  • --reset-cache革除 Metro 缓存,从新编译 JS 代码。

革除运行缓存

  • "./gradlew" clean

    • 切换到 android 目录下,在命令行执行该命令,可革除 gradle 缓存。
  • npx react-native start --reset-cache

    • 革除 Metro 缓存,从新编译 JS 代码
    • 利用场景:环境报错、开发者工具呈现问题

页面适配

计划一:

// src/utils/px2dp.js
import {Dimensions, PixelRatio, StyleSheet} from 'react-native';
const windowWidth = Dimensions.get('window').width;

const px2dp = function (px) {if (!isNaN(px)) {return (windowWidth / 1080) * px / PixelRatio.get()} else {return 0}
}
export default px2dp
// entry.js
import px2dp from '../utils/px2dp';
StyleSheet.create({
  pageTitle: {fontSize: px2dp(64),
    lineHeight: px2dp(85),
    paddingLeft: px2dp(100),
    paddingRight: px2dp(100),
    marginTop: px2dp(80),
  },
})

计划二:

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  View,
  Text,
  StyleSheet,
  Dimensions,
  PixelRatio,
} from 'react-native';
const {width: layoutWidth, height: layoutHeight} = Dimensions.get('window');
const pixelWidth = PixelRatio.getPixelSizeForLayoutSize(layoutWidth);
const pixelHeight = PixelRatio.getPixelSizeForLayoutSize(layoutHeight);
const ratio = PixelRatio.get();
const styles = StyleSheet.create({
  page: {
    width: pixelWidth,
    height: pixelHeight,
    transform: [
      {translateX: -0.5 * pixelWidth,},
      {translateY: -0.5 * pixelHeight,},
      {scale: 1080 / (ratio * pixelWidth),
      },
      {translateX: 0.5 * pixelWidth,},
      {translateY: 0.5 * pixelHeight,},
    ],
  },
  container: {
    width: 1080,
    backgroundColor: 'red',
  },
  half: {
    width: 540,
    backgroundColor: 'green',
  },
  quartar: {
    width: 270,
    backgroundColor: 'gray',
  },
});
function App(): JSX.Element {
  return (<SafeAreaView style={styles.page}>
      <StatusBar barStyle="light-content" />
      <View style={styles.container}>
        <Text>1</Text>
      </View>
      <View style={styles.half}>
        <Text>2</Text>
      </View>
      <View style={styles.quartar}>
        <Text>3</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;

构造 & 款式

原生组件:

https://reactnative.dev/docs/components-and-apis

  • 只有特定的组件才有交互款式与事件,如 ButtonTouchableHighlightTouchableOpacity,其余组件无奈绑定onPress 事件

    • 个别不选用 Button,而应用自定义 Button 组件,因为原生Button 款式不好调节
  • 不反对 svg,须要借助第三方库,e.g.react-native-svgreact-native-svg-transformer
  • 构造搭建:将 HTML 的标签用法齐全遗记,从新依据文档学习应用办法。

款式:

https://reactnative.dev/docs/image-style-props

  • 只能应用组件标准的款式,否则不起作用
  • lineHeight不能使文字居中,请应用justifyContent
  • 针对 Text 组件,须要独自定义相干款式,不会继承父级非 Text 组件 Text 款式,e.g. 不会从父级继承color
  • 不反对渐变色、投影等成果,须要借助第三方库,e.g.react-native-linear-gradientreact-native-shadow-2

Notes:第三方库的装置,须要重新启动我的项目,否则,会报模块找不到。

嵌套 ScrollView

  • flatlist嵌套在 scrollView 无奈滚动,父子级都须要设置 nestedScrollEnabled 属性
  • scrollView必须设定一个高度,否则会应用默认高度,并非由内容撑开。

    • 留神 stylecontentContainerStyle的区别
    • scrollView高度设定:专设 View 组件包裹,scrollView高度设置为flex:1

代码调试

react-native-debugger 的应用

  • 连贯react-native-debugger,须要应用程序开启 Debug 模式

    • 真机:摇一摇手机,呈现操作面板,抉择Debug
  • 模拟器:模拟器聚焦后,应用 Ctrl + m 关上操作面板

    • 双击 rreload
  • 应用 react-native-debugger 时,如果收回网络申请,可能会在 Network 面板发现没有 request 发动,申请(胜利 / 失败)回调没有执行。

    • react-native-debugger 非 Chrome 控制台 面板中右键,开启Enable Network Inspect

  • 应用 react-native-debugger 时,如果发现 Components 面板始终空白,应用 npx react-native start --reset-cache 革除缓存启动我的项目
  • react-native-debugger的应用,须要 同版本 react-devtoolsreact-devtools-core 作为开发依赖。

以后实例获取

类同 Chrome 开发者工具,在 RN 任意调试工具的 Console 面板:

  • 通过 $reactNative 等同于 import $reactNative from "react-native",能够应用react-native 库中的办法。
  • 通过 $r 能够获取以后选中节点实例

多种调试工具切换

在模拟器中开启 debug 后,调试每次都会主动默认关上 debugger-ui 页面,如何敞开:

  1. 在启动我的项目 npm run start 的命令行中应用 shift + d 切换到模拟器并关上调试面板,此时点击 debug 面板选项不再主动调起 debugger-ui 页面。
  2. 通过勾销选中小勾号来解决它Maintain Priority
  3. 防止间接在模拟器中通过 Ctrl + M 唤起面板,抉择debug,这样会默认调起debugger-ui

UI 审查

开启Android Studio:

  • 通过右下角的Layout Inspector,抉择模拟器或真机。
  • 点击构造,能够查看组件属性
  • 能够通过该面板的右上角设置,切换单位。
  • 能够通过给组件赋值testIDaria-label,进行组件辨认。

日志查看

开启Android Studio:

  • 通过下方的 logcat 能够设施日志,可用于剖析应用程序解体起因。
  • 可进行日志筛选,e.g.package:com.awesomeproject level:error

内部字体

https://www.jianshu.com/p/6000eb97d53b

  • 不像 H5 一样,针对不同的 font-weight 设置@`font-face`
@font-face {font-family: "Sans"; font-weight: 100; src: url("../assets/fonts/Thin.otf");}
@font-face {font-family: "Sans"; font-weight: 200; src: url("../assets/fonts/Light.otf");}
@font-face {font-family: "Sans"; font-weight: 400; src: url("../assets/fonts/Normal.otf");}

只能通过 字体文件名 设置不同的fontFamily

// font-weight:100
f100: {fontFamily: 'Thin' // 字体文件名}
// font-weight:200
f200: {fontFamily: 'Light' // 字体文件名}
// font-weight:300
f300: {fontFamily: 'Normal' // 字体文件名}

动画

  1. toValue只能定义整型,如果动画须要其余类型的值,须要应用interpolate
  2. 无奈对 svg 中的 circle 应用 transform 定义动画,只能通过 View 或其余元素包裹,实现旋转动画
  3. 如果页面内有大量运算,==Animated会被阻塞 ,因为Animated 是在 JS 线程运行,而非 UI 线程(https://stackoverflow.com/questions/56980044/how-to-prevent-setinterval-in-react-native-from-blocking-running-animation)
  const animationRef = useRef({strokeDashoffset: new Animated.Value(240),
    rotateZ: new Animated.Value(1)
  })
  useEffect(() => {const animationDef = () => {
      Animated.loop(
        Animated.sequence([
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 240,
                useNativeDriver: true,
                duration: 900
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 2,
                useNativeDriver: true,
                duration: 900
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 200,
                useNativeDriver: true,
                duration: 100
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 3,
                useNativeDriver: true,
                duration: 100
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 200,
                useNativeDriver: true,
                duration: 900
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 4,
                useNativeDriver: true,
                duration: 900
              }
            ),
          ]),
          Animated.parallel([
            Animated.timing(
              animationRef.current.strokeDashoffset,
              {
                toValue: 240,
                useNativeDriver: true,
                duration: 100
              }
            ),
            Animated.timing(
              animationRef.current.rotateZ,
              {
                toValue: 5,
                useNativeDriver: true,
                duration: 100
              }
            ),
          ])
        ])
      ).start()}
    animationDef()}, [animationRef])
  const rotateZ = animationRef.current.rotateZ.interpolate({inputRange: [1, 2, 3, 4, 5],
    outputRange: ['-100deg', '-424deg', '-500deg', '-784deg', '-820deg'],
  })

罕用第三方库

我的项目须要重启才能够,否则会报模块找不到

  • 渐变色

    • import LinearGradient from 'react-native-linear-gradient';
  • 反对 svg

    • "react-native-svg": "^13.9.0",
    • "react-native-svg-transformer": "^1.0.0",
  • 全局款式变量

"react-native-extended-stylesheet": "^0.12.0",

  • 毛玻璃

@react-native-community/blur —— 只能有一个子节点,多个子节点须要包裹

  • 投影

yarn add react-native-shadow-2 —— 包裹惟一子节点不能应用 margin,会导致 Shadow 不对齐,如果须要设置 margin,应用 View 包裹 Shadow 元素

第三方库应用带来的问题

UseEffect vs. UseFocusEffect

应用 react-native-navigation 在同一路由栈中切换页面,页面没有销毁,所以,useEffect的革除回调不会被触发,须要思考应用 [useFocusEffect](https://reactnavigation.org/docs/bottom-tab-navigator) 代替useEffect

环境变量设置

应用 react-native-dotenv 或其余第三方库设置环境变量,会呈现报错:Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "StringLiteral"

须要批改 rn-nodeify 主动生成的 shim.js 文件,给 process.env 换一种赋值形式:

const isDev = typeof __DEV__ === 'boolean' && __DEV__
const env = process.env || {}
env['NODE_ENV'] = isDev ? 'development' : 'production'
process.env = env
if (typeof localStorage !== 'undefined') {localStorage.debug = isDev ? '*' : ''}

报错:ReferenceError: Property 'TextEncoder' doesn't exist, js engine: hermes

https://github.com/hapijs/joi/issues/2141

android.support.annotation 包不存在的谬误

jetifier可一键解决

  1. 谬误产生在你将你的 Android 应用程序迁徙到应用androidx 库时
  2. import 当你应用androidx,你须要更新你的 Android 源代码,用androidx.annotation 包替换所有android.support.annotation 包的语句。

https://www.qiniu.com/qfans/qnso-40380519【举荐】

疑难杂症

  • 如何同时运行模拟器和真机 how to run react-native app on simulator and real device at the same time

https://stackoverflow.com/questions/51336123/how-can-i-run-two-react-native-applications

退出移动版