Introduction to the React Native

Classification of app

  • Native apps
  • Web App (Web Application)
  • Hybird App (Hybrid App)

Facebook found a lot of flaws in Hybrid apps and launched a new open source App development solution RN. Using JSX language to write native interface, JS through JSBridge call native API rendering UI interaction communication.

Advantages: The efficiency experience is close to Native App, and the cost of release and development is lower than Native App.

The web page in the hybrid App is different from the ordinary web page, which can call all the APIS of the underlying system. The secret is that the outer container provides an API Bridge that acts as an intermediary for the underlying API, allowing internal web pages to call the underlying layer. An API Bridge is a container that builds a Bridge between the underlying interface and the web page, allowing both sides to communicate. Once the container receives a request from the web page, it calls the API of the underlying system based on the request, and then returns the result to the web page. API Bridges are often provided in JavaScript for easy web invocation, and are called JsBridges. Ruan Yifeng blog

Wechat itself is a container, open its own interface (JSbridge), external developers write pages using specified syntax, the container can load these pages dynamically.

Build environment, official website tutorial

  1. Install Homebrew
  2. Install Node, Watchman, CocoaPods
  3. Installation of yarn
  4. Install Xcode

Among them, the most troublesome step is the pod install process. Due to git Clone Github project, the package can not be downloaded, and finally scientific online solution. Homebrew installation tutorial

The way a project is created

  • create-react-native-app
  • Use expo’s scaffolding Expo-CLI

design

style

Style: small hump eg: background-color: ‘000’

Wide high

The sizes in React Native are unitless and represent logical pixels that are independent of the pixel density of the device. Width: 500, height: 500

You can use Flex width height, percentage width height.

component

See the component documentation on rn’s website for details.

TouchableHighlight

Only one child node is supported. If you want to contain multiple child components, you can wrap them in a View.

API

See the Api documentation on rn’s website for details.

debugging

  • Open the emulator with Command + D, open the menu, and select Debug in Chrome.
  • And then will open the page http://localhost:8081/debugger-ui/, here is the debug page, debug, breakpoint debugging under the Source.