RN 尝鲜之旅

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

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

关于 RN 的一些说明

RN 与 R

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

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

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

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

关于 RN 环境搭建

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

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

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

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

5. 虽然第一次执行 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 的语法目前还不太熟悉。

效果展示

1. 展示一下目前的尝鲜内容

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

2. 贴一下代码

只有这个 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 (
     {
        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 (
    
      
      
    
  );
}

export default App;

运行效果

为什么要展示这个效果

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

末尾

最后的最后，欢迎大家批评指正。

另外，有时间的话，后面也许会写成一个系列，关于 RN 的。

---

追更1：本来想写一个井字棋的，后面发现 RN 里面的布局貌似比较麻烦，可以使用的控件也不多，感觉主要是要写 css 才能完成。

追更2：然后准备直接写 R， 不管 RN 了。 然后发现 R 的话，配套 Next.js 这种，实际上就是搞了一个本地的服务器，然后把内容往里面填。感觉也有点麻烦。（主要是这东西其实永无止境，里面包含的东西太多了。）

追更3：想了大概1分钟，终于下定决心了，CTMD，不卷了，还折腾什么几把玩意啊，就这样，断更，完结！！！