19 篇博文 含有标签「react-native」

Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.

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 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​

The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)

1. Walkthrough guides for setup ES6 develop environment in Mac by using Babel
2. Walkthrough guides setup ESLint to check the JavaScript style guide.
3. Teach Modern JavaScript programming language (ES6/ES2015)
4. 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

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

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

[React Native 0] Set up React Native on Mac for iOS and Android DevelopmentThe followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.medium.com​

[React Native 0] React-Native Setup on Windows for Android Development WalkthroughAndroid DevelopmentWalkthrough Android Developmentmedium.com​

The followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.

iOS Development

• Install Homebrew
• Install Node
• Install Watchman
• Install Xcode
• Init React-Native Project
• Run React-Native on iOS Simulators

Android Development

• Continued from iOS Development video
• Install Android Studio
• Setup Android SDK
• Setup ANDROID_HOME and PATH environment
• Install Genymotion
• Setup Genymotion ADB Setting
• Run React-Native on Genymotion

.bash_profile’s Content

[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>)

Notable Android’s SDK command

[adb devices #List all connected devices   
android #Lanuch android SDK package manager](<https://www.youtube.com/edit?o=U&video_id=8ybquJSjZHg>)