RN 尝鲜之旅

news2024/9/17 8:56:22

React Native 一直没使用过，闲来无事，还是尝鲜了一下下。

目前还没有出新手村，所以写的东西不一定具有任何参考价值，见谅。

关于 RN 的一些说明

RN 与 R

RN 与 R 的区别：来自掘金的一篇文章

RN 与 R 不一样，虽然他们的语法规范，理念各种是类似的，但是 RN 就是 RN，不是R。 (RN === React Native，R === React )

R 的代码直接放到 RN 项目是不能运行的，因为里面的标签啊，各种不完全一样。

RN 与 R 不一样，R 只能运行到 web 端，也就是浏览器上面；RN 是为了跨平台，可以运行到 Android/iOS/Web 等各种平台。（不过一些平台强相关的代码还是要额外写，比如Android就要写一些 java/kotlin 的代码，iOS 就要写一些 oc 的代码等。）
RN 与 R 一样，都是使用 JavaScript 语言的。都可以不使用 JSX 语法。（实际情况肯定是必须去使用）
RN 与 R 一样，都可以使用 TypeScript 去编写。 JSX 对应的就是 TSX。

关于 RN 环境搭建

虽然我是参考了 RN中文网-环境搭建这篇教程去搭建的，但是依然遇到了一些小问题:

我选的是 Windows 搭建 RN-android 开发环境的。

安装与配置 Node.js, npx, yarn 环境变量等没遇到问题。
安装 Android Stuio 没问题。（本地就有，不需要走这一步，但是按照教程配置 ANDROID_HOME的环境变量。）
创建项目，执行npx react-native@latest init AwesomeProject没问题。
执行 yarn android 遇到问题了。一些 gradle 依赖下载不下来，配置了阿里云 maven 也是一样。

解决方案：直接启动 Android studio ，在 AS 里面去下载 gradle 依赖，下载完成之后，启动模拟器，然后再次执行 yarn android , 就正常了。（可以在模拟器上面看到这个 app 的界面了。）
这个过程非常慢，那个教程网页上面说大概10分钟，实际上，我本地下载这些依赖至少超过了6个小时。

虽然第一次执行 yarn android很慢，但是，下次创建一个新的 project 比如 npx react-native@latest init AbcProject,然后再去执行 cd AbcProject&& yarn android, 这次就很快了。那些依赖应该是 global 的，下载一次就可以了。

关于运行

目前知道的，如果想脱离调试模式，让 rn app 正常运行的话，必须编译 release apk 才可以。否则一旦电脑上面的 Meto 服务关闭了，这个 rn app 就无法正常运行。

当然，这个对初学者无影响，初学者本来就是在学习，不需要让 app 独立运行到设备上面。~_~

关于 Hello World

RN-Android 的 hello world 也很简单，而且后面写更复杂的页面，也是只要修改/增加 RN 代码就可以了。目前来看，修改 Android 代码(也就是写Java/kotlin 这些)的场景应该很少，主要的代码都是在 RN 这块。

关于使用体验

目前来看感觉良好，不过对这种 TSX 的语法目前还不太熟悉。

效果展示

展示一下目前的尝鲜内容

实现的内容：在子组件的点击事件中调用父组件定义的函数。

贴一下代码

只有这个 App.tsx 是有改动的，其他代码都是通过 npx 创建项目的时候自带的代码。

// App.tsx
import React, { useState } from 'react';
import { Button, View } from 'react-native';


function titles(count: any, total: Number): string {
  return `Click count=[${count}], total=[${total}]`;
}


const CounterButton = (props: any) => {

  const [count, setCount] = useState(0);

  return (
    <Button
      title={titles(count, props.total)}

      onPress={() => {
        setCount(count + 1);
        props.fc();
        console.log("count=%s, total=%s", count, props.total);
      }}
      disabled={props.total > 12 || count > 12}
    />
  );
}


const App = () => {
  const [allCounts, setAllCounts] = useState(0);

  function increase(): void {
    setAllCounts(allCounts + 1);
    console.log("increase was be called, and total is:" + allCounts);
  }
  return (
    <View>
      <CounterButton total={allCounts} fc={increase}/>
      <CounterButton total={allCounts} fc={increase}/>
    </View>
  );
}

export default App;

运行效果

运行效果

为什么要展示这个效果

在参考教程一步一步走的时候，忽然想到如果要实现这种外部有个总的计数，里面分别计数的需求改怎么实现。想到了 states, props 但是不知道怎么组合来实现它。然后网上搜了很多，找到的都是使用 memo, usecallback 这些，后面仔细想想，又找到了关于 props 的一些用法，然后发现这样就可以实现，不需要使用其他的 hook.