Brew Update
$brew update$brew install node
$brew install watchman
$brew install yarn
$npm install -g react-native-cli
Init Project
$react-native init MyProject
$cd MyProject
$react-native run-ios
This will open up the Simulator but you can always open up Xcode manually
and show some fancy terminal window saying running on part 8081 blaa blaa
Native means Xcode
$cd ios
$open MyProject.xcodeproj
$open MyProject.xcodeproj
Run the project and you might see following all over the debugger window !!!
__nw_connection_get_connected_socket_block_invoke 50 Connection has no connected handler
- Xcode menu -> Product -> Edit Scheme...
- Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
- Run your again
If every thing goes well you can run the project which shows the following screen.
Hello World!
"Welcome to React Native!" ... Seriously ?
Some thing is very wrong about this window where is "Hello World!"
If you open the project folder you will see the following folder structure -
You can open the index.ios.js file on any text editor of your choice, but as we are making a native app lets open it in Xcode itself !
Drag and drop the file in Currently open Xcode project but make sure you uncheck both
- Copy Items if needed &
- Add to target
Now open the file and navigate to line sweet 16 !
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
Just replace the Line 20 with Hello World!
Now you do NOT need to hit "Cmd+R" on Xcode, just open the Simulator and hit "Cmd+R"
and with just small flicker for microsecond what you see is new content !
WoW !!! Thats the beauty of React Native - No compiling of code just reloading the view.
Links -
No comments:
Post a Comment