React Native: 那些开始之前应该知道的知识点

就这样了__ 2016-12-23

展开全文

本文翻译自 React Native: Things I wish I knew before starting out. ，从属于笔者的 ReactNative 入门与最佳实践系列文章。

React Native 是个非常优秀的项目，不过鉴于其仍处于不断地演进开发中，我们可能阅读到的很多的教程里的信息还是面向旧版本的。本文就是记录了些根据笔者的日常开发总结而来的你应该格外注意而又没有在文档中强调的细节要点。我会尽可能地在版本迭代之后更新本文的内容，不过还是要强调下本文编写于React Native v0.33（2016年9月）。

rnpm link

rnpm 已经被集成到了 react-native 命令行工具中，可以直接通过 react-native link 命令运行。不要单独的安装rnpm，它已经被弃用了。很多第三方的插件乃至于官方文档都没有提及这点。

自定义字体？你并不需要编辑Android/iOS项目

这一点好像也没有在文档之中并没有详细提及，不过根据这里描述的，我们并不需要编辑Android/iOS项目来添加自定义字体。我们只需要在项目的根目录下创建新的 assets 文件夹，拖入你所需要用的字体文件，然后在你的 package.json 中添加如下配置:

"rnpm": { "assets": ["assets"] },

然后，执行 react-native link 命令，该命令不仅会将第三方模块的原生代码链接入Android/iOS项目，还会将字体等文件移动至相应的目录中。然后你就可以通过设置 fontFamily 来使用安装好的字体。不过有时候使用 react-native link 并不能如人所愿，此时你可以参考下 react-native-video 这里的一些教程。

另外，需要注意的是目前RN中只支持font-weights与styles为bold与italic，RN会自动搜索yourFamilyName_bold.ttf与 yourFamilyName_italic.ttf。

RN中集成了不少非标准的Babel Plugins

React与RN本身已经集成了不少的Babel Plugins，你的代码可以直接使用这些Plugins，不过很多文档中并没有提及这些Plugins，我觉得了解有哪些Plugins还是很有意义的。

Flow

Flow 是Facebook出品的静态类型的语言，很类似于微软的 TypeScript 。所谓静态类型语言即使当你在初始化某个变量的类型之后你并不能再改变它的类型，类似于熟悉的C#、Java等等这些语言，这一特性有助于我们编写安全可控的代码。一个简单的Flow的例子如下所示:

function foo(argument1: string, argument2: number): string {  
    argument1 = 0; // this will fail when running flow
    argument2 = 0; // but this won't!return 1; // this however, will - you guessed it - fail.
}

Flow官网上建议在代码的首部添加 // @flow ，不过根据测试因为RN中已经内置了合适的Plugins，其可以完成自动的转化。

ES7 Class Properties

RN内部也已支持 ES7 Class Properties ，也就意味着你不需要写如下复杂的代码:

class MyComponent extends Component {  
    constructor(props) {
        super(props);
        this.thisIsAField = 1;
    }
}
MyComponent.propTypes = {  
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string
};

而可以写成这样:

class MyClass {  
    thisIsAField = 1;
    static propTypes = {
        firstname: React.PropTypes.string,
        lastname: React.PropTypes.string
    };
}

Object Spread Operator

Object Spread Operator 可以使得对象的合并更加方便，类似于Array Spread Operator，我们可以使用 ... 来解构某个对象，譬如:

// Rest propertieslet { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };  
console.log(x); // 1  
console.log(y); // 2  
console.log(z); // { a: 3, b: 4 }// Spread propertieslet n = { x, y, ...z };  
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }