开篇呢, 先给大家问个好, 今天是中秋节, 祝大家中秋节快乐!! 虽然是中秋节, 但是木有回家还是总结一下知识点写写博客吧, 想着昨天总结一下的, 但是昨天和几个同学小聚了一下, 酒逢知己总是千杯少呢, 喝的微醺不适合写东西, 所以就留到今天总结了. 因为这段时间在工作中陆陆续续的接触到了一些 RN 开发的东西, 还是需要总结一下的. 今天只是个开篇, 接下来还会有陆陆续续的关于 RN 开发的总结, 今天主要是环境搭建, 简单的组件封装, Props 和 State 的介绍, 稍后还会更新布局, 动画等一些开发中常用的东西.
虽然 RN 没有 Release 版, 虽然 Airbnb 放弃了 RN, 虽然 Facebook 正在重构 RN, 但是 RN 还是动态化比较好的选择方案的, 还是要好好的搞一下 RN 的, 当然也是工作中需要. 既然要搞, 就得认真呢, 这篇是关于 RN 的第一篇博客, 后续还会有其他关于 RN 的博客跟进的, 也好在自己的学习历程中打个 Tag. 今天博客比较简单, 是 RN 入门级别的, 当然进阶的东西目前还没有接触过, 等深入后再展开来记录吧.
RN 官方文档 (https://Facebook.GitHub.io/react-native/docs/getting-started)
一, RN 下的 Hello World
接触一个新的东西那必须从 HelloWorld 开始呢, 下方就一步步的从无到有搞一个 RN 的 Hello World!
1, 安装 Node 和 VSCode
首先我们来搞一下 Hello World 前的准备工作, 使用 RN 时, Node 环境是必不可少的, 如果你没有 Node 环境可以使用 brew 进行安装.(如果你还没安装 Homebrew, 那么请 Google 自行安装)
brew install node
然后可以把 node 的源更新成 taobao 的镜像, 这样访问速度会快一些.
- NPM config set registry https://registry.NPM.taobao.org --global
- NPM config set disturl https://NPM.taobao.org/dist --global
装完 Node 后, 然后就是选择安装一个开发 RN 的 IDE 了, 当然你如果够强大, 完全可以用记事本来编写 RN 的代码. 当然用记事本是开玩笑的, 可以用 Sublime Text,Visual Studio Code 等, 如果比较土壕的程序员呢, 你可以支持一下正版的 webstorm. 当然想我这样 "温饱都成问题" 的程序猿, 就只能用免费的 VSCode 了.
官方地址: https://code.visualstudio.com/
虽然本篇博客使用的 VScode, 但是平时开发中用 WebStorm 感觉还是挺爽的.
2, 安装 exp
直接在模拟器上调试, 依赖于 exp 这个 App, 下方这个命令就是安装 exp. 安装完后, 会在模拟器上看到 Expo 这个 App, 下方我们就会用到这个 Expo.
NPM install exp --global
3,create-react-native-App and run App
安装完 Node 后, 使用 Node 的 NPM 把 create-react-native-App 这个包装一下, 可以快速的创建一个 RN-Project.
然后使用 create-react-native-App 可以创建一个 RN 工程了, 下方创建了一个名为 MyFirstRNProject 的 RN 工程.
创建完相关的 RN 工程成功后会有相关的提示, 我们还是按照其提示的俩, 使用 yarn start 来启动工程.
启动后, 会让你选择相关的运行方式, 因为本篇博客是在 iOS 环境下做的 Demo, 所有就直接选择 i 即可.
选择 i 后, 就会启动模拟器中的 Expo. 可以用 command + D 来调用和隐藏开发调试面板. 然后就会看到右边红框找那个的默认的文案.
我们可以将默认的文案改一下, 然后修改一下样式, 添加上我们的 Hello World 保存即可. 因为默认 Live Reload 是打开的, 所以当相关的文件被修改后, 模拟器上的工程会自动 Reload 加载改动后的效果, 具体如下所示:
在上面的代码中我们还需注意到下方定义了一个 styles 的常量, 该常量是我们需要的样式对象. 在 RN 中可以使用 StylesSheet.create() 方法来创建我们需要的样式. 改样式的定义规则与 Web 前端中的 CSS 差不多, 使用方式页非常的相似. 下方我们还会定义其他的样式表, 稍后会介绍到.
二, 使用 TypeScript 来开发 RN
因为之前使用的另一个动态化的框架是用 TypeScript 来开发的, 想在 RN 中也用 TypeScript 来开发, 当然其默认的 JS 语言的. 在 RN 中支持 TS 开发, 有相关的文档 (https://GitHub.com/Microsoft/TypeScript-React-Native-Starter)
然后把工程中的 App.JS 替换成 App.tsx 即可.(纯 ts 文件使用. ts 来命名, 有 JSX 的 TS 文件则使用 tsx 来做后缀), 改完再次运行我们的 Hello World 即可.
三, 自定义组件 (Componet),Props 以及 State
实现完 HelloWorld 后我们来看一下 RN 中组件封装的姿势, 下方会封装一个 HelloWorld 的组件, 然后在该组件的基础上看一下 RN 中 Props 和 State 的使用姿势.
1,HelloWorld 组件封装
在 RN 中封装的组件都需要继承自 Component 类, 然后在该类中正常的去添加相关布局和相关逻辑即可. 下方我们将上述的 HelloWorld 进行了提取, 创建了一个 HelloWorld 类, 该类继承自 React 中的 Component. 然后在 render() 方法中通过 JSX 来添加需要渲染的各种组件, 当然在我们的 HelloWorld 中, 我们只用到了 Text 这个组件来展示文字.
封装的组件的使用姿势与 RN 提供组件的使用姿势是一样的, 都是通过 JSX 的语法来引入使用的. 下方 <HelloWorld /> 就是我们封装组件 HelloWorld 的使用姿势.
2,Props - 属性
属性, 说白了就是一个组件负责接送外部参数的一个东西, 类似于一个方法的参数. 当然, 如果你使用一个 Function 来定义一个组件的话, 那么这个 Props 就是方法的参数.
在上面的 HelloWorld 的示例中, 我们其实已经使用到了 Props 这个东西, 只不过是系统自带的, 比如上面为 HelloWorld 指定的 style 就是一个 props, 该 props 传入的是一个样式对象. 我们从 Web 前端的角度来说, 属性这个东西应该是比较好理解的, div 后边跟的 key 和 value, 后边这个 value 就是相关 key 的属性. 接下来我们将要介绍如何给自定义的组件添加特定的属性.
下方我们写了一个 HelloWorld 的组件, 该组件继承与 React 中的 Component, 然后在 render 中渲染了一些组件, 其中的 Text 是从属性 Props 中取的, 从下方代码中看出, 直接从 Props 中取相应的 Key 是可以取到的, 不过强取值的话, 会标红, 会提示相关的熟悉在 Props 中不存在. 稍后会解决该问题.
下方就是我们写的 Hello Props 组件, 组件中的相关内容时通过 Props 中的相关 key-value 来传过来的. 换句话说, Props 就是一个传值的 JSON 串.
通常我们在开发中会为 Props 定义相关的类型, 来声明 Props 中都有哪些东西, 下方就是我们为上述的 HelloWorld 补的 Props 的类型, 然后通过协议的形式指定给 HelloWorld 组件. 从下代码我们看出, 在 Props 类型后边还有一个 null 的类型, 该类型是声明 State 的类型使用的. 该处我们没有相关的状态, 就暂且不指定, 下方使用到的地方我们会给出相关的状态值.
添加完相关的类型声明后, 之前下方标红的地方就不存在了.
3,State - 状态
状态对应 RN 来说有着举足轻重的地位, 整个 RN 的页面或者一个小的 RN 组件都可以看做是一个状态机, 该状态机就是通过这个 State 来管理的. State 中可以存放各种状态以及各种值, 当这些值或者状态被修改时, 那么这个组件节点就会被重新渲染, 也就是更新页面或者组件. 下方我们就为我们的 HelloWorld 添加上相关的 State 状态, 然后通过该状态所对应的值做一些事情.
声明 State 类型: 首先我们像声明之前的 Props 类型一样声明了一个 HelloWorldStateType 的状态类型, 然后 HelloWorld 组件中状态类型的位置设置了该类型. 改类型中有一个属性, 从状态属性我们不难看出是用来控制某个空是否展示白色的.
初始 State: 我们指定状态类型后, 该状态还需要一个初始状态, 于是在构造器中对该状态进行了初始化.
定时器修改状态: 然后我们用定义了一个定时器, 使用定时器来定时的修改状态的值, 这样便于我们观察状态修改后的变化. 定时器的作用就是 "隔一秒改一下时间"(下方有个错别字, 就不改了)
最后就是在渲染的 render 方法中获取相关状态值进行使用了. 该状态最终用来控制字体颜色的变化.
下方就是上述代码运行的相关效果, 从下方的效果中不难看出, 没个一秒文字的颜色会随着状态而修改.
今天博客就先到这儿, 该做饭去了, 下篇博客会总结一个 RN 中常用的布局方式.
来源: https://www.cnblogs.com/ludashi/p/9282913.html