从ReactNative到React

发表于 | 更新于:

最近在写自己的一个前端小 Demo，因为之前在工作中使用了 ReactNative，就选择了 React 作为技术选型，也就走上了这么一条自上而下的路。本文主要内容为 ReactNative 和 Reactjs 的一些不同以及从 ReactNative 到 Reactjs 的一些开发中的经验，因此适合从原生转向前端或者对前端有些兴趣的同学，希望能帮大家少踩一些坑，少费一些力。

安装脚手架和搭建基础工程

1
2
3
4
5
6
//-g是将create-react-app安装到全局，该电脑的任何用户都可以使用
npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

这样我们就有一个基础的工程和基础的页面了，下面我们就开始讨论详细的问题了

1.自定义字体问题

自定义字体首先我们需要下载相应的字体并放到工程当中，然后在工程的 App.css 文件当中添加@font-face，实例如下：

1
2
3
4
@font-face {
  font-family: EBGaramond; //EBGaramond为自定义名称
  src: url("EBGaramond08-Italic.ttf");
}

然后我们就可以在 App.js 当中和其他页面文件当中使用fontFamily: 'EBGaramond'了

我们也可以自己新建一个 css 文件，但是要记得在 App.js 和页面文件当中导入

2.文件重复导入问题

1
2
import "./App.css";
import "./Font.css";

这种导入整个文件的方式导入后是全局的，顶级文件导入后其他地方就不再需要导入了，与导入类不同，导入类需要在每个使用的页面导入

3.布局方式问题-1

ReactNative 当中默认使用的是 flex 布局，flex-direction 为 column，而在 Reactjs 当中布局方式为一个从上往下的流式布局（该名词有待商榷，因为暂时不了解一些前端术语，故先这么称呼），这就需要我们修改它的布局方式。我的第一反应是在 css 添加这样一个样式

1
2
3
4
.content {
  display: flex;
  flex-direction: column;
}

但是这种方式需要每个页面都需要写一个 content 的选择器，后来我就改成了这种方式

1
2
3
4
body *:not(style) {
  display: flex;
  flex-direction: column; //Reactjs当中flex-direction默认为row，需要修改
}

至于为什么是body *:not(style)，那是因为*会把header，body，footer当中的所有内容都会当做 html 元素，所以我们只需要让 body 当中的所有内容使用 flex 布局即可，至于为什么有not(style)，那是因为它还会把 body 当中的 style 作为 html 元素，所以要除开。

4.布局方式问题-2

在使用了 flex 布局之后，你会发现当一行元素填充满的时候，这些元素并不会换行，那是因为在 Reactjs 当中 flexWrap 默认为 nowrap，需要设置为 wrap

1
2
3
4
5
body *:not(style) {
  display: flex;
  flex-direction: column; //Reactjs当中flex-direction默认为row，需要修改
  flexwrap: wrap;
}

在 js 样式文件中为

1
2
3
4
5
const styles = {
  content: {
    flexWrap: "wrap",
  },
};

其他后续更新中

……