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

Size & Dimensions & onLayout

Image
1.window size let winSize = Dimensions.get( 'window' ); console .log(winSize); class Size extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} > some text </ Text > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-start' }, block: { height: 100, width: winSize.width, backgroundColor: 'red' }, text: { color: '#ffffff', fontSize: 40/winSize.scale, backgroundColor: 'blue' } }); 2. onLayout class Size extends Component { handleTextLayout(evt){ console .log(evt.nativeEvent.layout); } render() { return ( < View style = {styles.container} > < View style = {styles.block} /> < Text style = {styles.text} onLayout = {this.handle
Read more

Data - Networking - Fetch

Image
 Fetch 1.apply  redux-thunk  middleware import { applyMiddleware, createStore, compose } from 'redux' ; import thunk from 'redux-thunk' ; import createLogger from 'redux-logger' ; import reducers from '../reducers' ; var middlewares = compose(applyMiddleware(thunk), autoRehydrate()); export default function configureStore ( ) { const store = createStore(reducers, undefined , middlewares); return store; } 2.start & end action types //todo action types export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS' ; export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS' ; 3.fetch flow import * as types from '../constants/ActionTypes' ; import * as APIs from '../constants/ServerAPIs' ; function shouldFetchAllTodos ( state ) { const data = state.todos; if (data && data.isFetchingAllTodos) { return false } return true ; } export function fetchAllTodos ( ) {
Read more

Absolute & Relative

Image
1.absolute class Position extends Component { render() { return ( < View style = {styles.container} > < View style = {styles.box1} > < Text style = {styles.text} > 1 </ Text > </ View > < View style = {styles.box2} > < Text style = {styles.text} > 2 </ Text > </ View > < View style = {styles.box3} > < Text style = {styles.text} > 3 </ Text > </ View > </ View > ); } } const styles = StyleSheet.create({ container: { flex: 1 }, box1: { position: 'absolute' , top: 40 , left: 40 , width: 100 , height: 100 , backgroundColor: 'red' }, box2: { position: 'absolute' , top: 80 , left: 80 , width: 100 , height: 100 , backgroundColor: 'blue' }, box3: { position: 'absolute' ,
Read more