ReactNative: Things I wish I knew before Starting out. This article is part of my ReactNative Primer and Best Practices series.

React Native is a great project, but given that it is still evolving, many of the tutorials we read are geared towards older versions. This article is a summary of some of the details that you should have paid special attention to but were not highlighted in the document. I will update this article as much as possible after iteration, but it should be noted that this article was written in React Native V0.33 (September 2016).

rnpm link

RNPM has been integrated into the React-Native command line tool and can be run directly from the React-Native Link command. Do not install RNPM separately, it is deprecated. Many third-party plug-ins and official documentation do not mention this.

Custom fonts? You don’t need to edit the Android/iOS project

This doesn’t seem to be mentioned in detail in the documentation, but as described here, we don’t need to edit the Android/iOS project to add custom fonts. Just create a new Assets folder in the root directory of your project, drag in the fonts you want to use, and add the following configuration to your package.json:

"rnpm": { "assets": ["assets"] },Copy the code

Then, execute the React-Native Link command, which not only links the native code of third-party modules into the Android/iOS project, but also moves files such as fonts to the appropriate directory. You can then use the installed font by setting fontFamily. However, sometimes using the React – Native Link does not work as expected. In this case, you can refer to the tutorials provided by react- Native Video. Note that RN only supports font weights and styles for bold and italic. RN automatically searches yourfamilyname_bold.ttf and yourfamilyname_italic.ttf.

There are a number of non-standard Babel Plugins integrated into RN

React and RN already integrate a number of Babel Plugins. Your code can use these Plugins directly, but many documents do not mention them. I think it is useful to know what these Plugins are.

Flow

Flow is a statically typed language from Facebook, much like Microsoft TypeScript. Statically typed languages, like familiar C#, Java, etc., allow you to write safe and controllable code, even though you can’t change the type of a variable after you initialize it. A simple Flow example looks like this:

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. }Copy the code

The Flow website recommends adding // @flow at the beginning of the code, but tests show that since appropriate Plugins are built into RN, this can be done automatically.

ES7 Class Properties

RN already supports ES7 Class Properties internally, which means you don’t need to write complex code like this:

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

Instead, it can be written like this:

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

Object Spread Operator

The Object Spread Operator makes merging objects easier. Similar to the Array Spread Operator, we can use… To deconstruct an object, for example:

// 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 }Copy the code