从ReactNative到React

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

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

//-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，实例如下：

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

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

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

2.文件重复导入问题

import './App.css';
import './Font.css';

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

3.布局方式问题-1

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

.content {
  display: flex;
  flex-direction: column
}

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

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

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

在js样式文件中为

const styles = {
    content: {
        flexWrap: 'wrap'
    }
};

其他后续更新中

……