Mr.Urbunse

Wednesday, September 13, 2017

How to build really simple app with react-native

7:54 PM

Hello. Welcome. 👋 This is urbunse react-native : A post to help you build your first mobile app, even if all you've ever done is write JavaScript. Especially if all you've ever done is JavaScript.

At first I need to create new project with react-native project flow the picture..

As you saw above I used the common : react-native init Project name to create my new project so you can put the name of your project as you want.. and choose your location that you want to put it into...☺️☺️☺️ now you it time to start your mission with this project yeyeye…😊😊😊 But before you start to run our project we still need to install some npm as below

Or if you had installed it already it’s okay.. So now I'm going to tell the key how to run our project. It’s really simple follow me..🤗🤗🤗🤗🤗

If you don’t understand you will say: what the fuck is that? It’s so messy!!!😇😇😇😇 Comedown please let me explain what does it me step by step… Step 1: - cd PhotoFlip..(*my project directory) - react-native run-ios (* run our project) Step 2: - It's the detail of the project when run like what port… Xcode file... As I said It’s simple so don’t think it complex easy easy….🤐🤐🤐🤐🤐🤐😳😳 Let’s see the the result of our first run of the year..😃😃😃😃

Congrats wow, it's work!!!👏👏👏👏👏 Antother thing I’m going to explain some tips before we jump to write our super cool app….👍👍👍👍

You will say, what? some but a lot. I’m not a lier😏😏. 🙌🙌🙌 I will tell you some of this that I almost use it and frequently use as well. -The first 1 is Reload: in short cut: cmd + R -Debug JS Remotely it used with your browser like chrome or firefoce.. when you run or reload your simulator it will reload on your browser as well at the same time.. So you will see warming or error or nothing of success 🙌🙌🙌. The last but not less is Enable Hot Reloading it will reload your simulator automatically when you save (cmd + S) your project when writing code.. super cool, right.. thank Facebook.githum.com 👍👍👍👍 Now we’re going deeper it make it work as our expect it work but you should understand the structure first….

-At the left side it’s project structure index.ios.js it’s run on iOS platform and index.andoid.js it’s run on Android platform Another thing like module for all npm so on, package.json store dependency, configuration, project name…. -At the right side if the default when we init our project so don’t worry…😇😇 😇

Now I delete some of the default code and write our code to make it our project both iOS and Android.. Let’s do it…😛😛😛. 😛 I Oh, now I will tell you the secret that I are going to build our app…😗😗😗

Oh, god I just make really awesome app design app, I don’ believe I can do that.. but you did it.. you can use some whatever you like Sketch or Photoshop or other… But for me I used Sketch because It's simple and easy…🤗🤗🤗🤗🤗😝 Back to our code and make as our design or a bit different as you want..

Here is our real design with some code


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight
} from 'react-native';
import Header from './src/components/Header';
const Images = [
  {
    uri: "https://4.bp.blogspot.com/-_AT3zNuj6Mo/
    WSVA8pNqUGI/AAAAAAAABpI/2w7IvyQP788lIAktMtawnBZQ8tNLJBDcQCLcB/s1600/8.jpg",
    label: "Supper yummy fly mushroom cooking"
  },
  {
    uri: "https://2.bp.blogspot.com/-hM0_laipdCg/
    WSVeoeNhUWI/AAAAAAAAAJo/fU4UnVXnUz0Hz6pVkt2KIkW8fGDwdI0TwCEw/s1600/11.jpg",
    label: "Amazing delicious fly hot checkent"
  },
  {
    uri: "https://2.bp.blogspot.com/
   -TvBHHtwoOqo/WSxGGmZzMAI/AAAAAAAABqs/
    pupaClNum4g79erQYirqbOjz3SorBx5HACEw/s1600/8.jpg",
    label: "Great flavorful fly pork"
  },
  {
    uri: "https://1.bp.blogspot.com/-lUlBhorpaLQ/
    WSRZzHHp4CI/AAAAAAAABmA/DBIB0a7S9gUwyOazCoUVlitlwhSd_FmOwCLcB/s1600/5.jpg",
    label: "Tasty and save money food"
  }
];
class Photoflib extends Component {
  state = {
    index: 0,
    imageWidth: null
  }
  nextImage (event) {
    const {index, imageWidth} = this.state,
    X = event.nativeEvent.locationX,
    delta = (X < imageWidth/2) ? -1: +1;
    let newIndex = (index + delta) % Images.length;
    if(index < 0) {
      newIndex = Images.length - Math.abs(newIndex);
    }
    this.setState({
      index: newIndex
    });
  }
  onImageLayout(event){
    this.setState({
      imageWidth: event.nativeEvent.layout.width
    });
  }

Main code here


const styles = StyleSheet.create({
  // style stuff
  containerStyle: {
    flex: 1
  },
  boxStyle: {
    backgroundColor:'#ddd',
    paddingTop: 70,
    marginTop: 1,
    height: 700,
    flex: 1
  },
  borderStyle:{
    backgroundColor:'#fff',
    height: 400,
    marginLeft: 20,
    marginRight: 20,
    alignItems: 'center',
    justifyContent:'center',
    shadowColor: '#3f4147',
    shadowOpacity: 0.9,
    shadowOffset: { width: 0, height: 2 },
    elevation: 1,
    position: 'relative'
  },
  imageStyle:{
    width: 320,
    height: 320
  },
  textStyle:{
    backgroundColor: '#2dbf60',
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    width: 320,
    height: 30,
    textAlign: 'center'
  }
});

Here is the result of our effort, wow, amazing you did it…

here is github project you can check it out..

Monday, May 29, 2017

រំលីងសាច់ជ្រូកបីជាន់ប្រៃផ្អែមជាមួយម្ទេស់បុក

9:06 AM

សាក់ធ្វើញ្ញាំទៅមើលវាឆ្ងាញ់ណាស់ចាប់មាត់ជីបៗម៉ង

គ្រឿងផ្សំ៖

១	សាច់ជ្រូកបីជាន់	៣ ខាំ
២	ស្លឹកម្រះព្រៅ	១ កូនចាន់
៣	ស្ករ	១ កូនចាន់
៤	ប្រេងសណ្ដែក	១ វែក
៥	ប្រេងខ្ចង	១ ស្លាបព្រារបាយ
៦	ម្សៅស៊ុប	កន្លះ ស្លាបព្រារបាយ
៧	ទឹកត្រី	កន្លះ ស្លាបព្រារបាយ
៨	ខ្ទឹមសរ និងម្ទេស់ស្រស់បុកចូលគ្នា	កន្លះ ស្លាបព្រារបាយ

របៀបធ្វើម្ហូប៖

ជំហានទី១៖ជំហាន់៖ យកសាច់បីជាន់យកមកហាន់ជាដុំៗទុកវាមួយឡែកសិន បន្ទប់មកយក ម្ទេសស្រស់ នឹងខ្ទឹមសរ បុកចូលគ្នា កុំអោយម៉ត់ពេក ។ ជំហានទី២៖ដាក់ខ្ទះអោយក្តៅបន្ទាប់មកចាក់សាច់ជ្រូកចូល រំលីងសាច់អោយក្រៀមបន្តិច ដួសសាច់ចានទុកវាមួយឡែកសិន ។ ជំហានទី៣៖ដាក់ខ្ទះអោយក្តៅបន្ទាប់មកដាក់ ម្ទេសនិងខ្ទឹម ដែលបានបុកហើយនោះចូលទៅក្នុងខ្ទះ ដាក់ស្ករ បិចេង ទឹកត្រី ប្រេងខ្យង បន្ទប់មកចាក់សាច់ចូលវិញ ដាក់ស្លឹកម្រះព្រៅ ចូលតែម្តងឆាវា ២ទៅ៣ត្រលប់ហើយដួសវាដាក់ចានជាកាស្រេច។

សូមទស្សនារបៀបធ្វើដោយផ្ទាល់តាមរយះ វិឌីអូខាងក្រោមនេះ ៖

សូមអរគុណចំពោះការតាមដានទស្សនា!!! សូមកុំភ្លេច Like👍 & Subscribe🙏 ផង!!!
សូមចុចទីនេះ➜ ដើម្បីមើល វិឌីអូផ្សេងទៀត😍

សំនុំ រូបភាព⁣⁣ទាំងអស់៖

សូមអរគុណ!!!!!!

Wednesday, May 24, 2017

ឆាផ្សិតភ្លៅមាន់

1:24 AM

ងាយៗស្រួលៗសំរាប់ស្រ្តីមេផ្ទះគ្រប់ ហើយឆ្ងាញទៀត

គ្រឿងផ្សំ៖

១	ផ្សិតភ្លៅមាន់	៣ ខាំ
២	សាច់ជ្រូកបីជាន់	២ ខាំ
៣	ជីវ៉ាន់ស៊ុយ	១ កូនចានតូច
៣	ស្ករ	កន្លះស្លាបព្រារបាយ
៤	ស្ករ	កន្លះស្លាបព្រារបាយ
៥	ម្សៅស៊ុប	កន្លះស្លាបព្រារបាយ
៦	ទឹកត្រី	កន្លះស្លាបព្រារបាយ
៧	ប្រេងខ្យង	១ ស្លាបព្រារបាយ
៨	ប្រេងសណ្តែក	កន្លះស្លាបព្រារបាយ

របៀបធ្វើម្ហូប៖

ជំហានទី១៖យកផ្សិតមកកាត់ជាបន្ទាស់ៗរួច ហានសាច់ជ្រូកជាបន្ទាស់ៗហើយ ចិញ្រ្ចាំខ្ទឹមសរបន្តិច។ ជំហានទី២៖ដាក់ដាំទឹកបន្តិចដើម្បីដាក់ស្ងោរផ្សិត អោយវាទន់បន្ទាប់មកដួសផ្សិតចេញពីខ្ទះ ទុកវាសិន។ ជំហានទី៣៖ដាក់ខ្ទះហើយ ចាក់ប្រេង និង ខ្ទឹមចូលបន្ទាប់មក ដាក់ សាច់ចូល ដាក់ស្ករ ម្សៅស៊ុប ទឹកត្រី និងប្រេងខ្យង បន្ទិច ឆាវាអោយសព្វសាច់ ហើយចាក់ ផ្សិតដែលយើងស្ងោរហើយនោះចាក់វាចូលខ្ទះ ឆា៤ទៅ៥ត្រលប់ទៅដួសវាដាក់ចានជាកាស្រេច។

សូមទស្សនារបៀបធ្វើដោយផ្ទាល់តាមរយះ វិឌីអូខាងក្រោមនេះ ៖

សូមអរគុណចំពោះការតាមដានទស្សនា!!! សូមកុំភ្លេច Like👍 & Subscribe🙏 ផង!!!
សូមចុចទីនេះ➜ ដើម្បីមើល វិឌីអូផ្សេងទៀត😍

សំនុំ រូបភាព⁣⁣ទាំងអស់៖

សូមអរគុណ!!!!!!

Monday, May 22, 2017

ត្រីខកំប៉ុងឆាជាមួយខ្ទឹមបារាំង

1:42 AM

សំរាប់នាក់ដែលខ្ចិលធ្វើម្ហូប ពេលដែលនៅម្នាក់ឯង

គ្រឿងផ្សំ៖

១	ត្រីស្រស់	១ ក្បាល
២	ប្រេង សណ្តែក	២ ស្លាបព្រារបាយ
៣	គល់ជីវ៉ានស៊ុយ នឹងស្លឹកខ្ទឹម	១ កូនចានតូច

របៀបធ្វើម្ហូប៖

ជំហានទី១៖យកខ្ទឹមបារាំងយកមកហាន់វាជាកង់ៗ ដាក់ចាន បន្ទាប់មកដាក់ខ្ទះអោយក្តៅបន្តិច ដាក់ប្រេងនិងខ្ទឹមសរចូល។ បន្តិច ហើយដាក់ ត្រីខកំប៉ុងចូលជាមួយខ្ទឹមបារាំងហើយកូរអោយបែកសាច់ត្រី ដាក់ទឹកបន្តិច ចាំវ៉ាយពងទាតាមក្រោយ។ *បញ្ចាក់ យើងមិនបាច់ដាក់ ស្ករ បិចេងក៏បាន ដែល ពីព្រោះ ត្រីខកំប៉ុងវាមានជាតិប្រៃ ស្រាប់ហើយ ដួសវាដាក់ចានជាកាស្រេច។

សូមទស្សនារបៀបធ្វើដោយផ្ទាល់តាមរយះ វិឌីអូខាងក្រោមនេះ ៖

សូមអរគុណចំពោះកាតាមដានទស្សនា!!! សូមកុំភ្លេច Like👍 & Subscribe🙏 ផង!!!
សូមចុចទីនេះ➜ ដើម្បីមើល វិឌីអូផ្សេងទៀត😍

សំនុំ រូបភាព⁣⁣ទាំងអស់៖