Building an app in 5 minutes

  1. Requirement follow Getting Started
  2. Generate a new React Native project
    react-native init testRn
  3. Build & run project
    react-native run-ios
    or open testRn/ios/testRn.xcodeproj and build with XCode's play button
or if the app already builded, start the webserver
npm start
//or
react-native start

Comments

Post a Comment

Popular posts from this blog

React Native Styling

With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color. The style prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles. As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Examples: const styles = StyleSheet . create ({ text : { fontSize : 20 , textAlign : ' center ' } }) function MyStyledText ({style, ... rest}) { return ( < Text style = {[ styles . text , style]} { ... rest} / > ) } ...
Read more

Performance

shouldComponentUpdate This chapter can be applied to all react apps. shouldComponentUpdate React is usually fast, but you still can improve performance by optimizing function  shouldComponentUpdate . By default it returns true, if returns false, the render function will be skipped. This function is frequently invoked when states or props are changed. So it's important to  keep it simple and fast . When you called  setState , the  render  function will always be excuted even if previous states are equal to current. This is where we can make some optimization. demo1 In demo1, when click button, it will set same state, but render times will still increase. demo2 In demo2, we check the value of name is equal to before or not, if equal return false, then we reduce the times of render function. But if our states structure is complicated, such as  { a: { b: { c: [1, 2, 3] }}} , we have to compare them deeply. This is obviously against the rules...
Read more

Realm

Realm React Native  brings the modern design & simplicity you expect from Realm, and will allow you to target both iOS and Android with the same codebase. Realm is not an ORM, and is not built on top of SQLite. Instead we’ve built a full database for mobile app developers, one that uses native JavaScript objects that are dynamically mapped to a full, custom database engine (not just a key-value store). This allows us to provide a simple API while preserving performance. With Realm, you can model complex data, link objects in a graph, and compose advanced queries. Example: class Test {} Test . schema = { name : 'Ron' , properties : { name : 'string' , age : 'int' , } }; let realm = new Realm ({ schema : [ Test ]}); realm . write (() => { realm . create ( 'Test' , { name : 'Ram' , age : 3 }); }); Realm’s ease of use doesn’t come at a performance cost. Because of its mem...
Read more