技术控

    今日:122| 主题:49179
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Creating Universal Windows Apps With React Native

[复制链接]
哼着哼着就走调了 发表于 2016-10-4 18:11:17
162 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
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 families of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.
  In this code story, we will walk 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.
     
Creating Universal Windows Apps With React Native-1 (Android,including,Windows,building,existing)
    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 may be familiar with RNPM , a tool initially built to simplify the process of adding native dependencies to React Native projects. RNPM has a great plugin architecture upon which the React Native for Windows command line tools were built.
  To start, make sure you have RNPM installed globally.
  [code]npm install -g rnpm[/code]  Once RNPM is installed, install the Windows plugin for RNPM and initialize your project.
  [code]npm install --save-dev rnpm-plugin-windows
rnpm windows[/code]   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 RNPM 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 in the same code base, then the recommendation is to first use the existing tutorial to set up your React Native project, and then follow the steps above. E.g.,
  [code]npm install -g react-native-cli
react-native init myapp[/code]   Note:the react-native-windows NPM package is only compatible with the latest versions of react-native , from version 0.27 onwards.
   Otherwise, you can easily set yourself up with npm init .
  [code]mkdir myapp
cd myapp
npm init
npm install --save-dev rnpm-plugin-windows
rnpm windows[/code]   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 RNPM 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 — This is the entry point to your React application.   
  • windows/myapp.sln — This is where you should start to launch your app and debug native code.   
  • windows/myapp/MainPage.cs — This is where you can tweak the native bridge settings, like available modules and components.  
  Here’s the full output:
  [code]├── 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[/code]   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:
     [code]import {
  View,
  Text,
  Image
} from 'react-native';[/code]   Currently, the same goes for Android- and iOS-specific modules, i.e.:
       [code]import {
  TabBarIOS,
  DrawerLayoutAndroid
} from 'react-native';[/code]     Since Windows is a plugin to the framework, core modules specific to Windows are imported from react-native-windows , i.e.:
         [code]import {
  FlipViewWindows,
  SplitViewWindows
} from 'react-native-windows';[/code]     So, a typical imports section of a React component with a mixture of core and Windows-specific modules will look like:
           [code]import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {
  SplitViewWindows
} from 'react-native-windows';[/code]       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, i.e., 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. E.g., 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.
             [code]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 (
      
        {text}
      

    );
  }
}[/code]        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, for now, 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. We are still working on deployment from the command line, but work to enable a run-windows command to the RNPM plugin is underway.
        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 !
       More Hands-On With Web And Mobile Apps

       Check out these helpful resources on building web and Mobile Apps:
      
            
  • Intro to the Universal Windows Platform        
  • How to port existing code to Windows with Windows Bridges        
  • App Development Courses and Tutorials        
  • C# / XAML Courses and tutorials        
  • Azure App Services        
  • Mobile Apps in Visual Studio with Xamarin      
        For further updates on the topic and new features, please view the original documentation .
      
            
  • 1 https://facebook.github.io/react/        
  • 2 https://www.smashingmagazine.com/2016/04/consider-react-native-mobile-app/        
  • 3 http://facebook.github.io/react-native/docs/debugging.html        
  • 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Creating-Universal-Windows-Apps-with-React-Native-opt.png        
  • 5 http://github.com/RNPM/RNPM        
  • 6 https://www.npmjs.com/package/react-native-windows        
  • 8 http://github.com/ReactWindows/react-native-windows/tree/master/local-cli/rnpm        
  • 9 https://facebook.github.io/react-native/docs/tutorial.html        
  • 10 https://github.com/ReactWindows/react-native-windows/blob/master/docs/LinkingLibrariesWindows.md        
  • 11 http://github.com/ReactWindows/react-native-windows/tree/master/docs/CoreParityStatus.md        
  • 12 https://github.com/facebook/node-haste        
  • 13 http://makeitopen.com/tutorials/building-the-f8-app/design/        
  • 14 https://www.visualstudio.com/downloads/download-visual-studio-vs        
  • 15 https://github.com/ReactWindows/react-native-windows/blob/master/docs/RunningOnDeviceWindows.md        
  • 16 https://discord.gg/0ZcbPKXt5bWJVmUY        
  • 17 https://github.com/ReactWindows/react-native-windows#opening-issues        
  • 18 https://github.com/ReactWindows/react-native-windows#contributing        
  • 19 https://msdn.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide?wt.mc_id=873567&UWApsWReactAppsatSM        
  • 20 https://developer.microsoft.com/en-us/windows/bridges?wt.mc_id=873567&UWApsWReactAppsatSM        
  • 21 https://mva.microsoft.com/training-topics/app-development?wt.mc_id=873567&UWApsWReactAppsatSM#!lang=1049        
  • 22 https://mva.microsoft.com/training-topics/c-app-development?wt.mc_id=873567&UWApsWReactAppsatSM#!lang=1049        
  • 23 https://azure.microsoft.com/en-us/services/app-service/?wt.mc_id=873566&HybridAppsAppsatSM        
  • 24 https://www.visualstudio.com/en-us/features/xamarin-vs.aspx?wt.mc_id=873567&UWApsWReactAppsatSM        
  • 25 https://www.microsoft.com/developerblog/real-life-code/2016/05/27/Creating-Universal-Windows-Apps-with-React-Native.html?wt.mc_id=873567&UWApsWReactAppsatSM      
        Apps React Native
        Advertisement
友荐云推荐




上一篇:机器学习入门方法
下一篇:Magisk Updated to v7, Now Completely Open Source
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

8omwrw87 发表于 2016-10-5 00:54:06
小手一抖,积分带走。
回复 支持 反对

使用道具 举报

刘洋 发表于 2016-10-6 00:28:06
如果每个女朋友用一个字来代替的话,我的情史可以写一部长篇小说了。
回复 支持 反对

使用道具 举报

浅笑年华つ 发表于 2016-10-22 21:51:57
关注一下!
回复 支持 反对

使用道具 举报

宁国某人 发表于 2016-11-3 07:39:07
时间过的真快,一不留神我也抢了回沙发!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表