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.
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.
The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)
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
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
The followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.
iOS Development
Android Development
[export ANDROID_HOME=/Users/{Account}/Library/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH](<https://www.youtube.com/edit?o=U&video_id=8ybquJSjZHg>)
[adb devices #List all connected devices
android #Lanuch android SDK package manager](<https://www.youtube.com/edit?o=U&video_id=8ybquJSjZHg>)
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
**Deterministic Turing machine
** คอมพิวเตอร์ที่รันคำสั่งเหมือนเดิมทุกครั้ง ถ้าหาก Input และ State เหมือนเดิม (คอมพิวเตอร์ในปัจจุบัน)
**
Non-deterministic Turing machine
** คอมพิวเตอร์ที่รันคำสั่งอาจะไม่เหมือนเดิมทุกครั้ง ถ้าหาก Input และ State เหมือนเดิม (แยก Process ได้) มันสามารถแตกการกระทำได้มากกว่า 1 พร้อมๆกัน
ตัวอย่างปัญหา
อาทิเช่น Zero sum subset problem สมมุติว่ามี Set อยู่ {5,-2,-3, 7, 8} ต้องหา Subset ที่รวมกันได้ 0 (คำตอบก็คือ {5, -2, -3}) เป็นต้น
Deterministic Turing machine
DTM ไล่รวมไปเรื่อยๆ จนกว่าจะเจอ O(N+(N-1)+(N-2)+… 1) = O(N(N+1)/2) = O(N²)
Non-deterministic Turing machine
NDTM แตก Process เป็น Tree ได้เลย อาทิเช่น
Steps Solutions
1 {}
2 {5} {-2} {-3} {7} {8}
3 {5,-2} {5,-3} {-2, 5} {-2, 3}
NDTM ถ้าซักสายใดสายหนึ่งเจอ มันจะเอาสายที่เจอมาเป็นคำตอบและหยุดการทำงาน สมมุติว่าถ้าเรารู้ว่าคำตอบมันต้องใช้ 3 ตัว มันจะเจอใน Step ที่ 3 แน่นอน ยังไงก็ไม่มากกว่า N เพราะฉะนั้นมันคือ O(N)
ขี้โกงจริงๆ
P คือเซ็ตของโจทย์ที่สามารถแก้ได้โดย Deterministic Turing machine ด้วยเวลา Polynomial
NP คือเซ็ตของโจทย์ที่สามารถแก้ได้โดย Non-Deterministic Turing machine ด้วยเวลา Polynomial หรือ โจทย์ที่สามารถตรวจว่าคำตอบนี้ถูกหรือผิดได้บน Deterministic Turing machine ด้วยเวลา Polynomial เมื่อให้คำตอบมาให้
จริงๆแล้ว P ก็เป็น Subset ของ NP เนื่องจากว่าทุกโจทย์ของ P สามารถแก้ได้ด้วย Non-Deterministic Turing machine ด้วยเวลา Polynomial แน่นอน (เพราะง่ายกว่า) เพราะฉะนั้น NP จึงมี P เป็น Subset ด้วย
ในทางกลับกัน เค้าว่ากันว่า จริงๆแล้ว P=NP ก็ได้ ว่าทุกปัญหาใน NP สามารถแก้ได้ด้วย Deterministic Turing machine ด้วยเวลา Polynomial (อันนี้บางคนเชื่อ บางคนไม่เชื่อนะครับ เพราะยัง Proof ไม่ได้ เลยเป็นปัญหาระดับโลกที่รอคนคอยพิสูจน์อยู่ว่า P=NP? หรือไม่ ใคร Proof ได้ ได้ล้านเหรียญนะครับ)
NP-Complete คือเซ็ต NP-P (NP ลบ P) คือเซ็ตที่เป็น NP เพียวๆจริงๆไม่มี P เข้ามาแทรก หรือโดยนิยามคือหมายความว่าเป็น เซ็ตของโจทย์ที่สามารถแก้ได้โดย Non-Deterministic Turing machine ด้วยเวลา Polynomial แต่ไม่สามารถแก้ได้โดย Deterministic Turing machine ด้วยเวลา Polynomial
NP-Hard คือเซ็ตของปัญหาขนาดใหญ่ที่มีส่วนนึงของการแก้ปัญหาเป็นปัญหาแบบ NP-Complete ส่วนที่ยากของ NP-Hard ก็คือส่วนของ NP-Complete นี่แหละ ถ้าแก้ส่วนย่อยของปัญหาที่เป็น NP-Complete ได้แล้ว (หรือว่าได้คำตอบของส่วนย่อยปัญหาที่เป็น NP-Complete นี้ได้หมดแล้ว) ปัญหา NP-Hard นี้ก็จะไม่ยากอีกต่อไป แก้ได้ง่ายๆ แต่มันก็ยากกว่า NP-Complete เพราะขั้นตอนในการแก้มันเยอะกว่า
ถ้าเรียงตามความยากจริงๆก็คือ จากง่ายสุดไปยากสุด
เพื่อความเข้าใจ ก็เลยมีคนวาดให้เข้าใจง่าย ดังแผนภูมิภาพนี้นะครับบบบ
กลุ่มซ้ายคือสำหรับคนที่เชื่อว่า P != NP
กลุ่มขวาคือสำหรับคนที่เชื่อว่า P = NP
6
I get about 100+ Linkedin friend invitations from many people every week. I think they wish to connect with me for some reasons so I often accept it. But with the high amount of invitations, click the accept button one-by-one is too slow and waste of my time. To make it super fast (within 2 seconds), I use the JavaScript trick to make the browser click all 100+ of accept invitation buttons for me programmatically.
Here is the step.
Visit the Linkedin Website and click on the invitation notification on the top right.
Click on the lovely “See all >” link.
Scroll down the list of pending invitations page. You will see about 20 of pending invitation boxes. Click “-See more-” to show more the invitation boxes in the page. Click “-See more-” repeatedly until you feel it enough. All visible invitation boxes that you see in the page will be accepted automatically by the JavaScript code in the next step.
In Chrome, Press F12 in Windows or Option-Command-I in Mac, to open the Chrome Developer Panel. Click on the Console tab. It is the JavaScript console panel. Copy and paste the following codes and press Enter to execute the code.
var x = document.getElementsByClassName(‘bt-invite-accept’); for (var i=0 ; i<x.length; i++) x[i].click();
In contrast, if you wish to reject all invitations at once, just use this codes instead…
var x = document.getElementsByClassName(‘bt-invite-decline’); for (var i=0 ; i<x.length; i++) x[i].click();