Beginning with the Example Application

To start building our note taking application for iOS, we are going to need a couple
of command-line tools.
• React Native 0.14.2 requires Node.js v4+, we are going to use v5.0.0; visit
https://nodejs.org for more information (we recommend managing
different node versions with NVM https://github.com/creationix/nvm)
• Install the latest version of NPM from https://www.npmjs.com/
Great, now that we have these tools we can install the react-native-cli.
The react-native-cli exposes an interface that does all the work of setting
up a new React Native project for us:
1. To install react-native-cli, use the npm command:
npm install -g react-native-cli
2. Next, we are going to generate a new React Native project called ReactNotes
using the cli and the react-native init command. The output of the
command looks similar to the following:
$ react-native init ReactNotes
This will walk you through the creation of a new React Native project in
/Users/ethanholmes/ReactNotes.
3. Set up a new React Native app in /Users/ethanholmes/ReactNotes:
 create .flowconfig
 create .gitignore
 create .watchmanconfig
 create index.ios.js
 create index.android.js
 create ios/main.jsbundle
 create ios/ReactNotes/AppDelegate.h
 create ios/ReactNotes/AppDelegate.m
 create ios/ReactNotes/Base.lproj/LaunchScreen.xib
 create ios/ReactNotes/Images.xcassets/AppIcon.
 appiconset/Contents json
 create ios/ReactNotes/Info.plist
 create ios/ReactNotes/main.m
 create ios/ReactNotesTests/ReactNotesTests.m
 create ios/ReactNotesTests/Info.plist
 create ios/ReactNotes.xcodeproj/project.pbxproj
 create ios/ReactNotes.xcodeproj/xcshareddata/xcschemes/
 ReactNotes.xcscheme
 create android/app/build.gradle
 create android/app/proguard-rules.pro
 create android/app/src/main/AndroidManifest.xml
 create android/app/src/main/res/values/strings.xml
 create android/app/src/main/res/values/styles.xml
 create android/build.gradle
 create android/gradle.properties
 create android/settings.gradle
 create android/app/src/main/res/mipmap-
 hdpi/ic_launcher.png
 create android/app/src/main/res/mipmap-
 mdpi/ic_launcher.png
 create android/app/src/main/res/mipmap-
 xhdpi/ic_launcher.png
 create android/app/src/main/res/mipmap-
 xxhdpi/ic_launcher.png
 create android/gradle/wrapper/gradle-wrapper.jar
 create android/gradle/wrapper/gradle-wrapper.properties
 create android/gradlew
 create android/gradlew.bat
 create android/app/src/main/java/com/reactnotes/
 MainActivity.java
To run your app on iOS:
 Open /Users/ethanholmes/ReactNotes/ios/ReactNotes.xcodeproj in
Xcode
 Hit Run button
To run your app on Android:
 Have an Android emulator running, or a device connected
 cd /Users/ethanholmes/ReactNotes
 react-native run-android
The root directory of the Xcode project is generated in the ReactNotes
folder, with the same name as we gave react-native-cli when we ran the
command. Follow the steps at the end of the React Native set up to see what
it produces.

Comments

Post a Comment

Popular posts from this blog

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

iOS and Android development with React Native

React Native is an open source JavaScript framework for building mobile applications for iOS and Android devices. It's based on React, a JavaScript framework for building websites for traditional browsers. (Eiseman 2016.) React Native provides an easy developer experience compared to traditional mobile development. When developing an application, you can instantly see changes without building the application first. You can also use your favourite tools like any text editor and terminal, and the developer tools in Chrome or Safari. You are not forced to use Xcode for iOS development or Android Studio for Android development. However, when developing for iOS, the development machines still needs to be an Apple OS X computer. (Eiseman 2016.) With React Native it's easy to use the same code for both iOS and Android applications. For some applications some functionality needs to be platform-specific, but it's possible to achieve even 87% code reuse on real-world applications ...
Read more

Flexbox

Image
1. Flexbox layout The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. 2.flex:1 const styles = StyleSheet.create({ container: { flex: 1 }, header: { height: 200 , backgroundColor: 'red' }, main: { flex: 1 , backgroundColor: 'blue' }, footer: { height: 200 , backgroundColor: 'green' }, text: { color: '#ffffff' , fontSize: 80 } }); 3.flexDirection:'row'|'column' 4.justifyContent:'flex-start'|'flex-end'|'center'|'space-between'|'space-around' 5.alignItems:'flex-start'|'flex-end'|'center'|'stretch' 6.alignSelf:...
Read more