React Native Course Directory
· อ่าน 4 นาที
Build native mobile app in iOS and Android in Single codebase by JavaScript programming language backed by Facebook.
Course Directory
31 บทความ ที่ติดแท็ก "tutorial"
ดูแท็กทั้งหมด[React Native 14] Startup Pitching
· อ่าน 1 นาที
This is a bit strange that we are talking about the Startup Pitching in the mobile app development course. But believe me, to success in the mobile app business, you need to know a lot about the business, not only the tech parts. This lecture, I summarized how to make the correct pitching deck. The Pitch deck is the core material that you need to send to your prospect investors to get funded. Moreover, it is the main visualizer to your audiences when you are pitching on the stages in the startup pitching competitions. After that, I summarized the core knowledge about tech startup especially in the Lean Startup that every tech-entrepreneur need to know, which help you save the ton of time in exploring about it by yourself.
[React Native 11] AsyncStorage and Realm DB for In-App Database Tutorial
· อ่าน 2 นาที
1
We are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and Realm Database (Like CoreData, SQLite in both iOS and Android).
Lecture Note
AsyncStorage
When you are develop the app, at one point, you will need to store information permanently for an application (it does not gone after the forced close and re-open). For faster loading time, Line app use a local database to remember all of your conversations. For caching propose, Facebook app use a local database to record all of the previously loaded news feed.
React Native AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,React Native AsyncStorage will use either RocksDB or SQLite based on what is available.
To use AsyncStorage, you don’t need to installation any extra library. It comes with React Native by default. AsyncStorage uses key-value pairs so to save data, as show in the following example.
import { AsyncStorage } from 'react-native';
AsyncStorage.setItem('myKey', myValue);
To loaded the saved data, you can do like this…
AsyncStorage.getItem('myKey').then((myValue) => {
this.setState({'myKey':myValue});
});
Since loading data is a time consuming task, It is designed to be a asynchronous operation. So getItem returned the promise, which will invoke the call back function when the read operation is completed.
More information, please see on Slide. TK We are adding soon.
[React Native 10] Camera, Camera Roll, Gallery by Making Selfies Scoreboard App
· อ่าน 1 นาที
Learn how to write iOS and Android mobile app to take photo (Camera), and selecting image from Phone’s Gallery (Camera Roll) by React Native.
[React Native 9] Using Map in React-Native (Apple Map and Google Map)
· อ่าน 1 นาที
Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.
[React Native 7] Navigation Bar, Scene Transition, List View
· อ่าน 1 นาที
React Native Navigation Bar, Scene Transition, ListView
Learn how to make multiple screen mobile application in React Native by using Navigation. Learn how to making Navigation bar in both iOS and Android. Try All of the Scene Transitions, and making ListView.
Lecture Presentation
[React Native 6] Components, Props, and Network By Making Stocks App
· อ่าน 1 นาที
React Native Components, Props, and Network By Making Stocks App
Learn how to make React Native Components and React Props in mobile applications. As well as, Learn how to use FetchAPI for getting remote information by making a practical Stock mobile application.
Lecture Presentation
[React Native 2] Modern JavaScript Programming language with ES6/ES2015
· อ่าน 1 นาที
The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)
- Walkthrough guides for setup ES6 develop environment in Mac by using Babel
- Walkthrough guides setup ESLint to check the JavaScript style guide.
- Teach Modern JavaScript programming language (ES6/ES2015)
- Teach how to write ES6/ES2015 with correct style guides (be the best practices from day one) based on Airbnb
Source code Git repository: https://github.com/kobkrit/react-native-class-2017
Quiz Submission Form: https://goo.gl/forms/TWoTk9nic5dY2r0F2
Quiz Submission Form Short: http://bit.ly/2kuKvlM
Allow POP to refresh the previous scene using React-Native-Router-Flux in IgniteJS
· อ่าน 1 นาที
1
This post is talk about how to allow the NavigationActions.pop() command of the react-native-router-flux library https://github.com/aksonov/react-native-router-flux refresh the props of the previous scene.
The situation is when user went from the Screen1 to Screen2, and user press “Back button” on the Navigation bars of Screen2 back to Screen1. Here is the way to notified Screen1 about this return.
NavItems.js
function popScreen(){
NavigationActions.pop({refresh:{}});
}export default {
backButton () {
return (
<TouchableOpacity onPress={popScreen}>
<Icon name='angle-left'
size={Metrics.icons.medium}
color={Colors.snow}
style={styles.navButtonLeft}
/>
</TouchableOpacity>
)
},...Screen1.js
Add the following function tocomponentWillReceiveProps(props){
console.log('component: componentWillReceiveProps');
console.log(props);
}NavigationRouter.jsclass NavigationRouter extends Component {
render () {
return (
...
)
}
}The console.log show as follows.component: componentWillReceiveProps
Screen1.js:29 Object {navigationState: Object, name: "Screen1", sceneKey: "Screen1", parent: "drawerChildrenWrapper", type: "REACT_NATIVE_ROUTER_FLUX_PUSH"…}
Screen1.js:33 component: shouldComponentUpdate
Screen1.js:38 component: componentWillUpdate
Screen1.js:42 component: componentDidUpdate
[React Native 1] Introduction to React-Native
· อ่าน 2 นาที
Hello, everyone. I am Kobkrit Viriyayudhakorn. This series, I will teach you how to make the mobile application in both iOS and Android by React-Native.
Here is the Course Outline
Course Outline of ITS485
Here is the first lecture.
React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.
React-Native vs Ionic Framework Comparison
React-Native Walk-through Installation Videos