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

   <p><a href="/misc/goto?guid=4958964526934019463" rel="nofollow,noindex">React Native</a> 是个非常优秀的项目，不过鉴于其仍处于不断地演进开发中，我们可能阅读到的很多的教程里的信息还是面向旧版本的。本文就是记录了些根据笔者的日常开发总结而来的你应该格外注意而又没有在文档中强调的细节要点。我会尽可能地在版本迭代之后更新本文的内容，不过还是要强调下本文编写于React Native v0.33（2016年9月）。</p>    <h2><strong>rnpm link</strong></h2>    <p>rnpm 已经被集成到了 react-native 命令行工具中，可以直接通过 react-native link 命令运行。不要单独的安装rnpm，它已经被 <a href="/misc/goto?guid=4959714402356911169" rel="nofollow,noindex">弃用</a> 了。很多 <a href="/misc/goto?guid=4959714402439894326" rel="nofollow,noindex">第三方的插件</a> 乃至于 <a href="/misc/goto?guid=4959714402524006630" rel="nofollow,noindex">官方文档</a> 都没有提及这点。</p>    <h2><strong>自定义字体？你并不需要编辑Android/iOS项目</strong></h2>    <p>这一点好像也没有在文档之中并没有详细提及，不过根据 <a href="/misc/goto?guid=4959714402605598760" rel="nofollow,noindex">这里</a> 描述的，我们并不需要编辑Android/iOS项目来添加自定义字体。我们只需要在项目的根目录下创建新的 assets 文件夹，拖入你所需要用的字体文件，然后在你的 package.json 中添加如下配置:</p>    <pre>  <code class="language-javascript">"rnpm": { "assets": ["assets"] },</code></pre>    <p>然后，执行 react-native link 命令，该命令不仅会将第三方模块的原生代码链接入Android/iOS项目，还会将字体等文件移动至相应的目录中。然后你就可以通过设置 fontFamily 来使用安装好的字体。不过有时候使用 react-native link 并不能如人所愿，此时你可以参考下 <a href="/misc/goto?guid=4959714402689155467" rel="nofollow,noindex">react-native-video</a> 这里的一些教程。</p>    <p>另外，需要注意的是目前RN中只支持font-weights与styles为bold与italic，RN会自动搜索yourFamilyName_bold.ttf与 yourFamilyName_italic.ttf。</p>    <h2><strong>RN中集成了不少非标准的Babel Plugins</strong></h2>    <p>React与RN本身已经集成了不少的Babel Plugins，你的代码可以直接使用这些Plugins，不过很多文档中并没有提及这些Plugins，我觉得了解有哪些Plugins还是很有意义的。</p>    <h2>Flow</h2>    <p><a href="/misc/goto?guid=4959714402765517148" rel="nofollow,noindex">Flow</a> 是非死book出品的静态类型的语言，很类似于微软的 <a href="/misc/goto?guid=4959714402850765085" rel="nofollow,noindex">TypeScript</a> 。所谓静态类型语言即使当你在初始化某个变量的类型之后你并不能再改变它的类型，类似于熟悉的C#、Java等等这些语言，这一特性有助于我们编写安全可控的代码。一个简单的Flow的例子如下所示:</p>    <pre>  <code class="language-javascript">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.  }</code></pre>    <p>Flow官网上建议在代码的首部添加 // @flow ，不过根据测试因为RN中已经内置了合适的Plugins，其可以完成自动的转化。</p>    <h2><strong>ES7 Class Properties</strong></h2>    <p>RN内部也已支持 <a href="/misc/goto?guid=4959714402923924425" rel="nofollow,noindex">ES7 Class Properties</a> ，也就意味着你不需要写如下复杂的代码:</p>    <pre>  <code class="language-javascript">class MyComponent extends Component {        constructor(props) {          super(props);          this.thisIsAField = 1;      }  }  MyComponent.propTypes = {        firstname: React.PropTypes.string,      lastname: React.PropTypes.string  };</code></pre>    <p>而可以写成这样:</p>    <pre>  <code class="language-javascript">class MyClass {        thisIsAField = 1;      static propTypes = {          firstname: React.PropTypes.string,          lastname: React.PropTypes.string      };  }</code></pre>    <h2><strong>Object Spread Operator</strong></h2>    <p><a href="/misc/goto?guid=4959714403009539852" rel="nofollow,noindex">Object Spread Operator</a> 可以使得对象的合并更加方便，类似于Array Spread Operator，我们可以使用 ... 来解构某个对象，譬如:</p>    <pre>  <code class="language-javascript">// 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 }</code></pre>    <p> </p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000006814388</p>    <p> </p>