Lets start with boiler template
/* @flow */
import React, { Component } from 'react';
import {
View,
TouchableOpacity,
Text,
StyleSheet,
PanResponder,
} from 'react-native';
export default class PanResponderDemo extends Component {
state={
debugActions:"Not Touched",
actions:[" ------------- Start ------------- "]
}
componentWillMount(){
this._panResponder = PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("1) onStartShouldSetPanResponder")})
// return true
},
onStartShouldSetPanResponderCapture: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("2) onStartShouldSetPanResponderCapture")})
// return true
},
onMoveShouldSetPanResponder: (evt, gestureState) => {
this.setState({debugActions:"3) onMoveShouldSetPanResponder"})
// return true
},
onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("4) onMoveShouldSetPanResponderCapture")})
// return true
},
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
},
onPanResponderMove: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("6) onPanResponderMove")})
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("7) onPanResponderRelease")})
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},
onPanResponderTerminate: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("8) onPanResponderTerminate")})
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
this.setState({actions: this.state.actions.concat("9) onShouldBlockNativeResponder")})
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
},
});
}
render() {
let {actions} = this.state
if(this.state.actions.length>20){
this.state.actions.shift()
this.setState({actions: this.state.actions});
}
return (
<View style={s.container}>
{/* Pan Responder Item */}
<View style={[s.panItem,]}{...this._panResponder.panHandlers}>
</View>
{/* DEBUG FLOATING CONTAINER */}
<TouchableOpacity onPress={()=>this.setState({actions:[" ------------- Restarted ------------- "]})} style={[{},s.debugContainer]}>
{this.state.actions.map((o,i)=>{
return <Text key={i} style={s.debugActions}>{o}</Text>
})}
</TouchableOpacity>
</View>
);
}
}
const s = StyleSheet.create({
container: {
flex: 1,
justifyContent:"center",alignItems:"center",
},
panItem: {
backgroundColor:"red",
height:50,
width:50,
},
debugContainer:{
position:"absolute",
bottom:25,
right:10,
flex:1,
zIndex:3,
width:null,
height:null,
alignItems:"center",
justifyContent:"center",
backgroundColor:"rgba(0,0,0,.5)"
},
debugActions:{
fontSize: 10,
color:"white",
textAlign: "center",
margin: 0,
},
});
Im referring to each PanResponder Function by Numbers as they are long function names:
- onStartShouldSetPanResponder
- onStartShouldSetPanResponderCapture
- onMoveShouldSetPanResponderCapture
- onPanResponderMove
- onPanResponderRelease
- onPanResponderTerminate
- onShouldBlockNativeResponder
(URL to Imgur Album - http://imgur.com/a/F6abq) Lets first make some observations. Here I have 1,2,3 & 4 returning false
Open in Imgur (New Tab) - https://i.imgur.com/escV7Ol.gif
Result: only calls 1 & 4 when touched
Now Lets make them (1,2,3 & 4) return true
Open in Imgur (New Tab) - http://i.imgur.com/t3aAGRK.gif
Result: calls 1,5,6,8,7 when touched
Project Starter Files / Structure
When you start a project you'll start with the following:
Everything in the
AppDelegate
is Global. Any View the user is currently in will have access to the logic inside theAppDelegate
.And together these ViewController.* and
AppDelegate.*
files create the AppDelegate Class.Notice how you have an AppDelegate.h as well as another one with a “.m” extension.
Header Files (Files With
.h
Extensions)These are called the Header Files. Everything in here is Public.
complies all
.c
and.m
files and replaces any#include *
, or#import *
directives with the entire text of those files where that directive#include *
, or#import *
statement was.Example
Assume you have the following:
Example.c
Example.h
Compiled Result
Whats Happening
The compiler would, after processing the replaces any
#include *
, or#import *
directives with the entire compiled outout would show:Implementation Files (Files With
.m
Extensions)Is called the Implementation Files (where the
.m
I assume stands for "Model", seeing as Objective-C uses the MV Architecture), Everything in here is Private. It's public when it's methods are included in the.h
header file.These are where your logic goes.
Syntax
Example using
NSLog
NSLog
notice:
%@
Is a Placeholder for
Objects
butNSString
andNSNumber
are both classes, and emit object instances of themselves when we create pointers with themDefining A String:
You're not supposed to use
int
,string
,const
, orchar
's in Objective-CLets that exand that by adding a number
Notice the scary
All this is saying is
Where you use the
[]
brackets to call a method of a class.Now lets log both our numbers and strings
Importing And Exporting
Include
For
C
andC++
FilesImport
For
Objective-C
FilesTerminology
Interface
A Skeleton or Schema to create
Objects
orArrays
Take the follwing
Instance Variables: Anything inside the
@interface
's{}
sTo Create an Instance Method do it outside the
@interface
's{}
sInstance Methods use
-(void)
:Class Variables use
+(void)
:Resources
.h
&.m
Extensions - http://stackoverflow.com/a/2620632/4642530Advanced Objective-C basics for Expericnced Programers - https://www.youtube.com/watch?v=jztMdaFV90U