React native Some of the problems encountered in getting Started

This example is referenced from the first lesson of React native

React Native Official document Chinese version (with latest Android content)

Here is just about to record my steps and problems encountered, be sure to keep in mind the following:

If you are experiencing prompt write permission under your Mac, remember to add sudo to the command before

Install the necessary environment for development, refer to here >>

Some of the problems I have encountered:

1) Install Brew

CURL-LSSF Http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz-c/usr/local--strip 1

Refer to "Mac Installation Brew"

2) Install and activate NVM

Reference Official Document: Https://github.com/creationix/nvm#installation

curl-o-https://raw.githubusercontent.com/creationix/nvm/v0.28.0/install.sh | Bash

Activate NVM ". ~/.nvm/nvm.sh "or" Source ~/.nvm/nvm.sh "

3) Install REACT-NATIVE-CLI, pay attention to the problem of permissions

sudo npm install-g react-native-cli

4) Initial project, thief slow

sudo react-native init hello
Do not know what the reason, particularly slow, download there has been constantly around/back and forth, more than half an hour did not respond

5) Double-click the. Xcodeproject Error (I'm sorry I didn't capture and save the wrong information here)

sudo chmod-r 777 project directory file name setting read-write permission to operate

6) Simulator Command + R does not refresh the interface

Reference: https://github.com/facebook/react-native/issues/306

7) Prompt Style property setting error when encoding, React native currently supported style property name

Valid style props: [
Alignitems
Alignself,
Backfacevisibility,
BackgroundColor,
borderBottomColor,
Borderbottomleftradius,
Borderbottomrightradius,
borderBottomWidth,
BorderColor,
borderLeftColor,
borderLeftWidth,
Borderradius,
borderRightColor,
borderRightWidth,
BorderStyle,
borderTopColor,
Bordertopletradius,
Bordertoprightradius,
borderTopWidth,
BorderWidth,
Bottom
Color
Flex
Flexdirection,
Flexwrap,
FontFamily,
FontSize,
FontStyle,
Fontweigt,
Height
Justifycontent,
Left
Letterspacing,
Lineheight,
Margin
MarginBottom,
Marginhorizontal,
MarginLeft,
MarginRight,
MarginTop,
Marginvertical,
Opacity
Overflow
Padding
Paddingbottom,
Paddinghorizontal,
Paddingleft,
Paddingright,
Paddingtop,
Paddingvertical,
Position
ResizeMode,
Right
Rotation
ScaleX,
ScaleY,
Shadowcolor,
Shadowoffset,
Shadowopacity,
Shadowradius,
TextAlign,
Textdecorationcolor,
Textdecorationline,
Textdecorationstyle,
Tintcolor,
Top
Transform
Transformmatrix,
TranslateX,
Translatey,
Width
Writingdirection
]

In order to understand the use of CSS in react native, such as how to set a number of properties, etc., I did some attempts, the final effect such as. code here >>

<view Style={[styles.container, styles.space,]}>

If you want to understand the specific implementation of the various components and the use of methods/properties, you can directly see the corresponding. js source code, as shown:

Looks very simple some things, in fact, there are many pits, their own to know the depth of the water, with its development of mobile applications is really cool, it is simply cool crooked! But, you do not expect to use it to the end, at least you still have to learn Objective-c/swift/cocoa and Android/java, otherwise if you encounter the official not exposed to the underlying components, you yesterday? Wait for someone else to help you solve it, that can only wish you good luck:)

You have a react native classmate, before jumping into this pit, I think there are still a few skills need to prepare:

1, JavaScript basic syntax to be, ES6 you need to understand, otherwise see similar to the following code to determine not dazed?

var  {
   appregistry, 
   Activityindicatorios, 
   Image, 
   ListView, 
   StyleSheet, 
   Text, 
   View, 
} = React; 

There is a jsx problem, many people think it "backwards", how to say, stand in some way to see it, it is true. But on the whole, it is created to reduce the amount of code and the intuitive coding. such as react.createelement (XXX (there is a long east, attributes Ah, events and so on), you use <view style={} is done, so it seems easier. 2, Flex-box layout Model A complete guide to Flexbox this article you must not miss, five-star recommendation, but note is not all attributes react native support, several support is: Flex, Flex-direction, Flex-wrap, Justify-content, Align-items, align-self when you actually apply a property name, multiple words start with the second word, all capitalized, and become: Flex, Flexdirection, Flexwrap, Justifycontent, Alignitems, Alignself 3, learn about React.jsreact is a thought, React JS and React Native are implemented based on react ideas (component development). The main reason is that the web is relatively easy to develop and less difficult to get started with (I do not have to belittle the web), you can find an online editor, such as: http://jsfiddle.net/http://codepen.io/, Tapping the code on the page and then immediately seeing the effect is better than holding your Mac. After all, many companies do not allow employees to use computers other than the company, there are GFW, the company's various shielding rules, WiFi restrictions/Access site restrictions, before checking a data watercress is also blocked.  Fortunately, the operation is also to see, this is not blocked, ORZ ... Nagging these many, in the hook online has seen some companies began to recruit react native people, I wish you little friends to play happily!

React native Some of the problems encountered in getting Started