Table of contents

1 First Look

1.1 Building an app in 5 minutes

npm start//orreact-native start

1.2 How it works

1.3 Debug tools

console.log('some text');console.dir({a:1, b:2, c:3});debugger;//breaking point

//jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];/**   * OPTION 2   * Load from pre-bundled file on disk. The static bundle is automatically   * generated by the "Bundle React Native code and images" build step when   * running the project on an actual device or running the project on the   * simulator in the "Release" build configuration.   */jsCodeLocation= [[NSBundlemainBundle]URLForResource:@"main" withExtension:@"jsbundle"];

jsCodeLocation= [NSURLURLWithString:@"http://172.28.0.230:8081/index.ios.bundle?platform=ios&dev=true"];

if (!_url) {NSUserDefaults*standardDefaults= [NSUserDefaultsstandardUserDefaults];NSIntegerport= [standardDefaultsintegerForKey:@"websocket-executor-port"] ?:8081;NSString*URLString= [NSStringstringWithFormat:@"http://172.28.0.230:%zd/debugger-proxy?role=client",port];_url= [RCTConvertNSURL:URLString];  }

1.4 DOCs & APIs

1.5 Resources

2 Components

//define componentclassMyComponentextendsReact.Component{render(){return<Text>My component!</Text>;}}//export componentexportdefaultMyComponent;

//import componentimportMyComponentfrom'./MyComponent';classMainextendsReact.Component{render(){//use componentreturn<MyComponent>;}}

AppRegistry.registerComponent('MyApp',()=>Main);

2.1 Render & JSX

.....render(){consttxt='Hello';functionsay(name){return'I am '+name;}return(<View><Text>This is a title!</Text><Text>{txt}</Text><View><Text>{say('React')}</Text></View></View>);}.....

2.2 View, Text, Image, etc

.....import{StyleSheet,Text,View,Image}from'react-native';classMainextendsComponent{render(){return(<View><Imagesource={require('./img/bg.png')}><Imagesource={require('./img/icon.png')}/><Text>            some text!</Text></Image></View>);}}

2.3 Lifecyle

2.4 Props & States

classUserextendsComponent{render(){constuser=this.props.data;this.props.onReady('I am ready!');return(<View><Text>          score:{this.props.score}          type:{this.props.type}          Name:{user.name}          Age:{user.age}</Text></View>);}}//dufaultPropsUser.propTypes={score:React.PropTypes.number};User.defaultProps={score:0};varuser={name:'foo',age:21};classMainextendsComponent{handleReady(str){console.log(str);}render(){return(<View><Usertype="Dev"data={user}onReady={this.handleReady}/></View>);}}

classTimerextendsComponent{constructor(props){super(props);this.state={count:0};}componentDidMount(){letthat=this;setInterval(function(){that.increase();},1000);}increase(){this.setState({count:this.state.count+1});}render(){return(<View><Text>count:{this.state.count}</Text></View>);}}classMainextendsComponent{render(){return(<View><Timer/></View>);}}

constHeading=({title})=><Text>{title}</Text>;.....<Headingtitle="test title"/>.....

2.5 Events

classTouchextendsComponent{handlePress(){console.log('press');}handleLongPress(){console.log('longPress');}render(){return(<TouchableHighlightonPress={this.handlePress}onLongPress={this.handleLongPress}><View><Text>Press me!</Text></View></TouchableHighlight>);}}

classTestextendsComponent{//...//handle events//...render(){return(<TextInputonBlur={...}onChange={...}onEndEditing={...}onSelectionChange={...}onSubmitEditing={...}</TextInput>);}}

//keyboardWillShow, keyboardDidShow, keyboardWillHide, keyboardDidHide//keyboardWillChangeFrame, keyboardDidChangeFrame//add the listenervarlistener=DeviceEventEmitter.addListener('keyboardWillShow',(e)=>{console.log('Event is fired!');});//remove the listenerlistener.remove();

classTestextendsComponent{/* Capture handles *///the responder system bubbles up from the deepest component,//a parent View wants to prevent the child from becoming responder on a touch starthandleStartShouldSetResponderCapture(evt){returntrue;}//the responder system bubbles up from the deepest component,//a parent View wants to prevent the child from becoming responder on a touch movehandleMoveShouldSetResponderCapture(evt){returntrue;}/* Lifecycle handles *///Does this view want to become responder on the start of a touch?handleStartShouldSetResponder(evt){returntrue;}//Called for every touch move on the View when it is not the responder://does this view want to "claim" touch responsiveness?handleMoveShouldSetResponder(evt){returntrue;}//The View is now responding for touch events.handleResponderGrant(evt){console.log('you are touching me');}//Something else is the responder right now and will not release ithandleResponderReject(evt){console.log('please wait in line');}/* event handles *///touch movehandleResponderMove(evt){console.log('touch move at:','X='+evt.pageX,'Y='+evt.pageY);}//touch end/uphandleResponderRelease(evt){console.log('touch end');}//Something else wants to become responder. Should this view release the responder?handleResponderTerminationRequest(evt){returntrue;}//touch cancelhandleResponderTerminate(evt){console.log('touch canceled');}render(){return(<ViewonStartShouldSetResponderCapture={this.handleStartShouldSetResponderCapture}onMoveShouldSetResponderCapture={this.handleMoveShouldSetResponderCapture}onStartShouldSetResponder={this.handleStartShouldSetResponder}onMoveShouldSetResponder={this.handleMoveShouldSetResponder}onResponderGrant={this.handleResponderGrant}onResponderReject={this.handleResponderReject}onResponderMove={this.handleResponderMove}onResponderRelease={this.handleResponderRelease}onResponderTerminationRequest={this.handleResponderTerminationRequest}onResponderTerminate={this.handleResponderTerminate}><Text>Press me!</Text></View>);}}

this._panResponder=PanResponder.create({// Ask to be the responder:onStartShouldSetPanResponder:(evt,gestureState)=>true,onStartShouldSetPanResponderCapture:(evt,gestureState)=>true,onMoveShouldSetPanResponder:(evt,gestureState)=>true,onMoveShouldSetPanResponderCapture:(evt,gestureState)=>true,//touch startonPanResponderGrant:(evt,gestureState)=>{},//touch moveonPanResponderMove:(evt,gestureState)=>{},onPanResponderTerminationRequest:(evt,gestureState)=>true,//touch end/uponPanResponderRelease:(evt,gestureState)=>{},//touch cancelonPanResponderTerminate:(evt,gestureState)=>{},onShouldBlockNativeResponder:(evt,gestureState)=>true,});

2.6 Resources

3 Styles

conststyles=StyleSheet.create({container:{flex:1,backgroundColor:'blue',},text:{fontSize:14,color:'red'}});

classMainextendsComponent{render(){return(<Viewstyle={styles.container}><Textstyle={styles.text}>I am red.</Text></View>);}}

3.1 Flexbox

conststyles=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}});

classMainextendsComponent{render(){return(<Viewstyle={styles.container}><Viewstyle={styles.header}><Textstyle={styles.text}>200X100</Text></View><Viewstyle={styles.main}><Viewstyle={styles.mainContent}><Textstyle={styles.text}>100X100</Text></View></View><Viewstyle={styles.footer}><Textstyle={styles.text}>200X100</Text></View></View>);}}conststyles=StyleSheet.create({container:{flex:1,justifyContent:'center',alignItems:'center'},header:{height:100,width:200,backgroundColor:'red'},main:{height:200,width:200,padding:25,borderWidth:25,borderColor:'black',margin:25,backgroundColor:'blue'},mainContent:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'red'},footer:{height:100,width:200,backgroundColor:'green'},text:{color:'#ffffff',fontSize:20}});

3.2 Absolute & Relative

classPositionextendsComponent{render(){return(<Viewstyle={styles.container}><Viewstyle={styles.box1}><Textstyle={styles.text}>1</Text></View><Viewstyle={styles.box2}><Textstyle={styles.text}>2</Text></View><Viewstyle={styles.box3}><Textstyle={styles.text}>3</Text></View></View>);}}conststyles=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',top:120,left:120,width:100,height:100,backgroundColor:'green'},text:{color:'#ffffff',fontSize:80}});

box2:{position:'absolute',top:80,left:80,width:100,height:100,backgroundColor:'blue',transform:[{'translate':[0,0,1]}]},

classRelativeextendsComponent{render(){return(<Viewstyle={styles.container}><Viewstyle={styles.box1}><Textstyle={styles.text}>1</Text><Viewstyle={styles.ball}/></View><Viewstyle={styles.box2}><Textstyle={styles.text}>2</Text></View></View>);}}conststyles=StyleSheet.create({container:{flex:1},box1:{position:'relative',top:40,left:40,width:100,height:100,backgroundColor:'red'},box2:{position:'absolute',top:100,left:100,width:100,height:100,backgroundColor:'blue'},ball:{position:'absolute',top:40,left:40,width:40,height:40,borderRadius:20,backgroundColor:'yellow'},text:{color:'#ffffff',fontSize:80}});

classFixedextendsComponent{render(){return(<Viewstyle={styles.container}><Viewstyle={styles.tbar}><Textstyle={styles.text}>Fixed top bar</Text></View><ScrollViewstyle={styles.main}><Viewstyle={styles.item}><Textstyle={styles.text}>1</Text></View><Viewstyle={styles.item}><Textstyle={styles.text}>2</Text></View><Viewstyle={styles.item}><Textstyle={styles.text}>3</Text></View></ScrollView><Viewstyle={styles.bbar}><Textstyle={styles.text}>Fixed bottom bar</Text></View></View>);}}conststyles=StyleSheet.create({container:{flex:1},tbar:{width:375,height:100,borderBottomWidth:5,borderColor:'black',backgroundColor:'red'},main:{flex:1},item:{height:200,width:375,marginTop:10,backgroundColor:'green'},bbar:{width:375,height:100,borderTopWidth:5,borderColor:'black',backgroundColor:'red'},text:{color:'#ffffff',fontSize:40}});

3.3 Size & Dimensions & onLayout

letwinSize=Dimensions.get('window');console.log(winSize);classSizeextendsComponent{render(){return(<Viewstyle={styles.container}><Viewstyle={styles.block}/><Textstyle={styles.text}>some text</Text></View>);}}conststyles=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'}});

classSizeextendsComponent{handleTextLayout(evt){console.log(evt.nativeEvent.layout);}render(){return(<Viewstyle={styles.container}><Viewstyle={styles.block}/><Textstyle={styles.text}onLayout={this.handleTextLayout}>some text</Text></View>);}}

3.4 Inheritance

classInheritanceStyleextendsComponent{render(){return(<Viewstyle={this.props.parentColor}></View>);}}classMainextendsComponent{handleReady(str){console.log(str);}render(){return(<Viewstyle={styles.container}><InheritanceStyleparentColor={styles.blue}/></View>);}}conststyles=StyleSheet.create({container:{flex:1},blue:{flex:1,backgroundColor:'blue'}});

import{StyleSheet,Dimensions}from'react-native';letwinSize=Dimensions.get('window');constBaseStyles=StyleSheet.create({text:{fontSize:40/winSize.scale}});exportdefaultBaseStyles;

importBaseStylesfrom'./BaseStyles';classInheritanceStyleextendsComponent{render(){return(<Viewstyle={this.props.parentColor}><Textstyle={[BaseStyles.text,styles.text]}> this is a long text</Text></View>);}}conststyles=StyleSheet.create({text:{color:'#ffffff'}});

3.5 Resources

4 Architecture

4.1 Redux

//action typeconstADD_TODO='ADD_TODO';//action creator, semantic methods that create actions//collected together in a module to become an APIfunctionaddTodoAction(title,hour){//action, an object with a type property and new data, like eventsreturn{type:ADD_TODO, title, hour}}

//a function that accepts an accumulation and a value and returns a new accumulation.functiontodoReducers(state=[],action){switch(action.type){caseADD_TODO://always return a new state, never mutate old statereturn[{id:Utils.GUID(),title:action.title,endTime:getEndTime(action.hour),completed:false},        ...state]default://return default statereturnstate}}

import{createStore}from'redux';//1. define storeletstore=createStore(todoReducers);classAppextendsComponent{constructor(props){super(props);this.state={todos:[]};}componentDidMount(){//2. subscribe storethis.unsubscribeStore=store.subscribe(()=>{//3. getStatethis.setState({todos:store.getState()});});}componentWillUnmount(){//5. unsubscribe storethis.unsubscribeStore();}renderTodoList=()=>{//reder todo listreturnthis.state.todos.map((todo)=>{return<Textkey={todo.id}>Todo:{todo.title}</Text>});}handleAddTodo=()=>{//4. dispatching actionsstore.dispatch(addTodoAction('Create a new todo',8));}render(){return(<View><TouchableHighlightonPress={this.handleAddTodo}><Text>Add Todo</Text></TouchableHighlight><ScrollView>{this.renderTodoList()}</ScrollView></View>);}}

4.2react-redux

import*asnavigationActionsfrom'./navigation';import*astodosActionsfrom'./todos';exportdefault{...navigationActions, ...todosActions};

import{combineReducers}from'redux';importnavigationfrom'./navigation';importtodosfrom'./todos';constrootReducer=combineReducers({  navigation, todos});exportdefaultrootReducer;

import{createStore}from'redux';importreducersfrom'../reducers';exportdefaultfunctionconfigureStore(){conststore=createStore(reducers);returnstore;}

import{bindActionCreators}from'redux';import{connect}from'react-redux';classAppextendsComponent{renderTodoList=()=>{//reder todo listreturnthis.props.todos.map((todo)=>{return<Textkey={todo.id}>Todo:{todo.title}</Text>});}handleAddTodo=()=>{this.props.actions.addTodoAction('Create a new todo',8);}render(){return(<View><TouchableHighlightonPress={this.handleAddTodo}><Text>Add Todo</Text></TouchableHighlight><ScrollView>{this.renderTodoList()}</ScrollView></View>);}}functionmapStateToProps(state){return{todos:state.todos};}functionmapDispatchToProps(dispatch){return{actions:bindActionCreators(Actions,dispatch)}}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(App);

importReact,{Component}from'react';import{Provider}from'react-redux';importAppfrom'./containers/App';importconfigureStorefrom'./store/configureStore';classRootextendsComponent{render(){return(<Providerstore={configureStore()}><App/></Provider>);}}exportdefaultRoot;

4.3 Containers & Components

import{Header,Main,}from'../components/home-view';importActionsfrom'../actions';classHomeViewextendsComponent{render(){return(<View><Header{...this.props}/><Main{...this.props}isVisible={this.state.isVisible}/></View>);}}functionmapStateToProps(state){return{todos:state.todos};}functionmapDispatchToProps(dispatch){return{actions:bindActionCreators(Actions,dispatch)}}exportdefaultconnect(mapStateToProps,mapDispatchToProps)(HomeView);

4.4Todo React Native App

4.5 Naming convention

src/containers/ModuleNameView.js

src/components/module-name-view-index.js-Main.js-Header.js- ...-img-icon@2x.png-icon@3x.png

handleEventName=()=>{//todo}...<MyComponentonEventName={this.handleEventName}/>

renderMethodName=()=>{//todo}render(){return(<View>{this.renderMethodName()}</View>);}

functionmapStateToProps(state){return{todos:state.todos};}functionmapDispatchToProps(dispatch){return{actions:bindActionCreators(Actions,dispatch)}}

index.jstodos.jsnavigation.js

exportconstSWITCH_MAIN_TAB='SWITCH_MAIN_TAB';

import*astypesfrom'../constants/ActionTypes'exportfunctionaddTodo(title,hour){return{type:types.ADD_TODO, title, hour}}

index.jstodos.jsnavigation.js

import{ADD_TODO,DELETE_TODO,EDIT_TODO,COMPLETE_TODO}from'../constants/ActionTypes'constinitialState=[]exportdefaultfunctiontodos(state=initialState,action){switch(action.type){caseADD_TODO://tododefault:returnstate}}

index.jsBasic.jsTheme.js

import{StyleSheet,Dimensions}from'react-native';letwinSize=Dimensions.get('window');constBasic=StyleSheet.create({text:{fontSize:32/winSize.scale}});exportdefaultBasic;

//colorsconstcolor={green:'#00551e',brown:'#693504',red:'#db2828'}//otherconstactive={opacity:0.6}exportdefault{color, active}

4.6 Resources

5 Data

5.1 Fetch

import{applyMiddleware,createStore,compose}from'redux';importthunkfrom'redux-thunk';importcreateLoggerfrom'redux-logger';importreducersfrom'../reducers';varmiddlewares=compose(applyMiddleware(thunk),autoRehydrate());exportdefaultfunctionconfigureStore(){conststore=createStore(reducers,undefined,middlewares);returnstore;}

//todo action typesexportconstSTART_FETCH_ALL_TODOS='START_FETCH_ALL_TODOS';exportconstFETCH_ALL_TODOS='FETCH_ALL_TODOS';

import*astypesfrom'../constants/ActionTypes';import*asAPIsfrom'../constants/ServerAPIs';functionshouldFetchAllTodos(state){constdata=state.todos;if(data&&data.isFetchingAllTodos){returnfalse}returntrue;}exportfunctionfetchAllTodos(){returnasync(dispatch,getState)=>{//verifyif(!shouldFetchAllTodos(getState())){returnPromise.resolve();}//dispatch fetch start actiondispatch({type:types.START_FETCH_ALL_TODOS});//fetchingconstresponse=awaitfetch(APIs.allTodos);//responseconstdata=awaitresponse.json();//dispatch fetch end actionreturndispatch({type:types.FETCH_ALL_TODOS,      data});}}

exportdefaultfunctiontodos(state=initialState,action){switch(action.type){casetypes.START_FETCH_ALL_TODOS:returnObject.assign({},state,{isFetchingAllTodos:true});casetypes.FETCH_ALL_TODOS:returnObject.assign({},state,{isFetchingAllTodos:false,data:action.data.data.reduce(function(pre,cur){//remove duplicates!pre.find(key=>key.id===cur.id)&&pre.push(cur);returnpre;},[...state.data])});    ...    ...default:returnstate}}

...componentDidMount(){//fetch data from serverthis.props.actions.fetchAllTodos();}......renderLoading=()=>{if(this.props.todos.isFetchingAllTodos){return(<Viewstyle={styles.loading}><Textstyle={styles.loadingText}>Loading...</Text></View>)}returnnull;}...

5.2 Persistent

import{AsyncStorage}from'react-native';import{applyMiddleware,createStore,compose}from'redux';importthunkfrom'redux-thunk';import{persistStore,autoRehydrate}from'redux-persist';importreducersfrom'../reducers';varmiddlewares=compose(applyMiddleware(thunk),autoRehydrate());exportdefaultfunctionconfigureStore(){conststore=createStore(reducers,undefined,middlewares);persistStore(store,{storage:AsyncStorage});returnstore;}

5.3 Resources

6 Router

6.1 Navigator

importMainTabsViewfrom'./MainTabsView';importEditViewfrom'./EditView';importBroswerViewfrom'./BroswerView';constROUTES={ MainTabsView,  BroswerView, EditView};

classAppextendsComponent{renderScene=(route,navigator)=>{letScene=ROUTES[route.name];return<Scene{...route}navigator={navigator}/>;}configureScene=(route,routeStack)=>{switch(route.name){case'EditView':returnNavigator.SceneConfigs.FloatFromBottom;default:returnNavigator.SceneConfigs.PushFromRight;}}render(){return(<Viewstyle={styles.container}><StatusBarbarStyle="light-content"/><NavigatorinitialRoute={{name:'MainTabsView'}}renderScene={this.renderScene}configureScene={this.configureScene}/></View>)}}

...handleEdit=()=>{//Navigate forward to a new scenethis.props.navigator.push({name:'EditView',data:this.props.data});}...

...close=()=>{//Transition back and unmount the current scenethis.props.navigator.pop();}...

...componentDidMount(){this.currentRoute=this.props.navigator.navigationContext.currentRoute;this.bindEvents();}componentWillUnmount(){this.unBindEvents();}bindEvents=()=>{this.willFocusSubscription=this.props.navigator.navigationContext.addListener('willfocus',(event)=>{if(this.currentRoute!==event.data.route){this.setState({isVisible:false});}});this.didFocusSubscription=this.props.navigator.navigationContext.addListener('didfocus',(event)=>{if(this.currentRoute===event.data.route){this.setState({isVisible:true});}});}unBindEvents=()=>{this.willFocusSubscription.remove();this.didFocusSubscription.remove();}...

6.2 Resources

7 Native Modules

8 Integration

8.1 iOS

Cocoapods with local path

Requirement : [CocoaPods](https://cocoapods.org/) After pod **version > 1.0**, you need to identify the target. Create 'Podfile' in project root folder :```

8.1.1 Package

react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/bundle/index.ios.bundle --assets-dest ios/bundle```   # 8.2 AndroidAt first I followed the official instruction (which seems very simple) but lots of build or runtimeerror occurs 😂.Such as:``` Can't find variable: __fbBatchedBridge (<unknown file>:1)``````java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so``````android.view.WindowManager$BadTokenException: Unable to add window android.view.ViewRootImpl$W@5d992cf -- permission denied for this window type```But the demo works corrcetly, so I decided to copy the build settings of it. And finally it works normally on my Nexus 5X. Steps:- Add the path to the root gradle file,![](integration_android_step11.png)- Modify the app gradle file,![](integration_android_step22.png)    *1. Official demo use this variable to control wheather building different apps for cpus, that will reduce the size of each app, I just ignore it here.    *2. The version support package matters..As react-native Android use many open source projects, if you use some of them already, you should check the version or exclude the from dependencies.  [The list currently](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle)     ```    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:recyclerview-v7:23.0.1'    compile 'com.facebook.fresco:fresco:0.11.0'    compile 'com.facebook.fresco:imagepipeline-okhttp3:0.11.0'    compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'    compile 'com.google.code.findbugs:jsr305:3.0.0'    compile 'com.squareup.okhttp3:okhttp:3.2.0'    compile 'com.squareup.okhttp3:okhttp-urlconnection:3.2.0'    compile 'com.squareup.okhttp3:okhttp-ws:3.2.0'    compile 'com.squareup.okio:okio:1.8.0'    compile 'org.webkit:android-jsc:r174650'

8.2 Android

    compile 'com.android.support:appcompat-v7:23.0.1'    compile 'com.android.support:recyclerview-v7:23.0.1'    compile 'com.facebook.fresco:fresco:0.11.0'    compile 'com.facebook.fresco:imagepipeline-okhttp3:0.11.0'    compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'    compile 'com.google.code.findbugs:jsr305:3.0.0'    compile 'com.squareup.okhttp3:okhttp:3.2.0'    compile 'com.squareup.okhttp3:okhttp-urlconnection:3.2.0'    compile 'com.squareup.okhttp3:okhttp-ws:3.2.0'    compile 'com.squareup.okio:okio:1.8.0'    compile 'org.webkit:android-jsc:r174650'

8.2.1 Package

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/bundle/index.android.bundle --assets-dest android/bundle/

8.3 Before publishing

8.3 Resources

9 Hot Update (draf)

10 Performance

10.1 shouldComponentUpdate

shouldComponentUpdate

Immutable-js

10.2 Resources

Resources

Books

Created by@unbug: