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.
末尾
最后的最后，欢迎大家批评指正。
另外，有时间的话，后面也许会写成一个系列，关于 RN 的。
