Pengembangan Android dengan React Native | React Native

pada tanggal

Memulai Pengembangan Android dengan React Native di Windows

Persiapan

Variable : JAVA_HOME
Value    : C:\Program Files\Java\jdk1.7.0_79
Kemudian lakukan hal yang sama untuk android sdk-nya

Konfigurasi SDK, Emulator disini saya menggunakan emulator genymotion dengan alasan spek laptop saya :), setelah download genymotion nya kemudian download emulatornya sesuai kebutuhan, jika teman teman menggunakan emulator bawaan android studio seperti ini,
  • Install Android Studio
  • Buat projek kosong di Android Studio
  • Buat Android Virtual device : Manage AVD → Create
  • jalan kan emulatornya
Sekarang mulai deh bikin app di react native nya, buka command prompt nya, untuk memudahkan teman teman bisa gunakan git bash, disini saya menggunakan cmder (custom command prompt) yang sudah include git.
bash
cd /Users/Hasyim/react-native-workspace/
Sesuaikan di direktori masing masing jika belum ada folder nya maka buat dulu dengan perintah mkdir. Kemudian sekarang kita install react-native nya,
npm install -g react-native-cli
Tunggu hingga instalasi selesai, jika sudah selesai sekarang kita buat projek pertama untuk uji coba,
react-native init ProjekPertama

 Tunggu hingga proses pembuatan projek selesai, sambil menunggu nyalakan emulatornya. setelah proses pembuatan projek selesai cek isi folder nya, kemudian buka di text editor/IDE anda. Anda juga bisa mengecek file apa saja yang dibuat oleh react native.


Kurang lebih seperti gambar di atas, saya menggunakan view demikian ketika sedang belajar react-native, file induk ada di index.android.js. sekarang kita coba jalankan, menggunakan perintah :
react-native run-android
Tunggu hingga proses building selesai.

React.js is a popular JavaScript library for building reusable UI components. React Native takes all the great features of React, from the one-way binding and virtual DOM to debugging tools, and applies them to mobile app development on iOS and Android. With the React Native Universal Windows platform extension, you can now make your React Native applications run on the Universal Windows family of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.
This code story will walk you through the process of setting up a Universal Windows project for React Native, importing core Windows-specific modules to your JavaScript components, and running the app with Visual Studio.

Installing React Native for Windows

Installing the React Native Universal Windows platform extension is easy, whether you want to add the Windows platform to your existing app, or you want to start from scratch building an app just for Windows.

Adding React Native for Windows to Existing Projects

React Native developers are probably familiar with the react-native-cli, a tool for initializing React Native projects, deploying apps to devices, capturing JavaScript logs, upgrading versions, etc.
To start, make sure you have react-native-cli installed globally.
npm install -g react-native-cli
Once react-native-cli is installed, install the Windows plugin for React Native. The Windows plugin will expose new commands to the react-native-cli, specifically the react-native windows command, which you will use to initialize your project.
npm install --save-dev rnpm-plugin-windows
react-native windows
The windows command will do the following:
  • Install react-native-windows from NPM
  • Read the name of your project from package.json
  • Use Yeoman to generate the Windows project files.
The react-native-cli plugin architecture searches your local package.json dependencies and devDependencies for modules that match rnpm-plugin-*, hence the --save-dev above.
Head to GitHub for more information on rnpm-plugin-windows.

Creating a React Native for Windows Project from Scratch

You have a few different options to create a React Native Universal Windows project from scratch. If your eventual intent is to also build apps for iOS and Android from the same code base, then the recommendation is first to use the existing tutorial to set up your React Native project, and then follow the steps above. For example:
npm install -g react-native-cli
react-native init myapp
Note: the react-native-windows NPM package is only compatible with the latest versions of react-native, from version 0.27 forward.
Otherwise, you can easily set yourself up with npm init.
mkdir myapp
cd myapp
npm init
npm install --save-dev rnpm-plugin-windows
react-native windows
Note: the default behavior for choosing the version of react-native-windows is to install the latest version if the package.json does not yet have a react-native dependency. Otherwise, if a react-native dependency already exists, the plugin will attempt to install a version of react-native-windows that matches the major and minor version of react-native.
The Windows plugin for React Native will automatically install the react-native and react peer dependencies for react-native-windows if they have not yet been installed.

React Native for Windows Project Structure

There are a few boilerplate files that get generated for the Universal Windows App. The important ones include:
  • index.windows.js is the entry point to your React application.
  • windows/myapp.sln is where you should start to launch your app and debug native code.
  • windows/myapp/MainPage.cs is where you can tweak the native bridge settings, like available modules and components.
Here’s the full output:
├── index.windows.js
├── windows
    ├── myapp.sln
    ├── myapp
        ├── Properties
            ├── AssemblyInfo.cs
            ├── Default.rd.xml
        ├── Assets
            ├── ...
        ├── App.xaml
        ├── App.xaml.cs
        ├── MainPage.cs
        ├── project.json
        ├── Package.appxmanifest
        ├── myapp_TemporaryKey.pfx
We ship the core C# library for React Native as source on NPM. Having direct access to the source will help with debugging and making small tweaks where necessary. As long as the core ships as source, third party modules will also need to follow suit (although their dependencies may be binary). We’ll be working with the React Native community on react-native link support to make dependency management as simple as possible. Instructions for how to link dependencies are available on GitHub.

Building and Extending Apps for the Windows Platform.

The core components and modules for React Native are imported as follows:
import {
  View,
  Text,
  Image
} from 'react-native';
Currently, the same goes for Android- and iOS-specific modules:
import {
  TabBarIOS,
  DrawerLayoutAndroid
} from 'react-native';
Since Windows is a plugin to the framework, core modules specific to Windows are imported from react-native-windows:
import {
  FlipViewWindows,
  SplitViewWindows
} from 'react-native-windows';
So, a typical imports section of a React component with a mixture of core and Windows-specific modules will look like:
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  SplitViewWindows
} from 'react-native-windows';
There is a list of the core modules available on React Native for Windows on GitHub.
There are multiple ways to add conditional behavior to your apps based on the platform. One way that you might already recognize is the use of the *.platform.js pattern, that is, index.[android|ios|windows].js. The node-haste dependency graph will choose the filename that matches the active platform choice, and fallback to the filename without any platform indicator, if available. For example, if you have files MyComponent.windows.js and MyComponent.js, node-haste will choose MyComponent.js for Android and iOS and MyComponent.windows.js for Windows.
Another way is to use conditional logic inside a component, as demonstrated in the simple component below.
import React, {Component} from 'react';
import {
  Platform,
  Text,
  View
} from 'react-native';
 
class HelloComponent extends Component {
  render() {
    var text = "Hello world!";
    if (Platform.OS === 'android') {
      text = "Hello Android!";
    } else if (Platform.OS === 'windows') {
      text = "Hello Windows!";
    }
    
    return (
      <View>
        <Text>{text}</text>
      </View>
    );
  }
}
Facebook has a very good article on cross-platform design with React Native at makeitopen.com.

Running the Universal Windows App

There are a few options for running your React Native Universal Windows app. The easiest way is to use the run-windows command that is enabled once react-native-windows is installed in your project:
react-native run-windows
This command will deploy your app to the desktop. There are other options and flags you can use to deploy to emulators and devices, which you can read about using react-native run-windows --help. The easiest way, however, to deploy to other devices such as emulators and Xbox is to launch the app in Visual Studio. After initializing the project, open the Visual Studio solution at ./windows/myapp.sln in Visual Studio 2015 (Community Edition is supported). From Visual Studio, choose which platform you want to build for (x86, x64, or ARM), choose the target you want to deploy to, and press F5.
The instructions for running React Native UWP apps, both from Visual Studio and from the CLI, will be evolving on GitHub.
If you have any problems getting started with building or running your React Windows application, reach out on Discord or open an issue. We look forward to hearing your feedback and reviewing your contributions!

Komentar

Posting Komentar