React

react-native-icons 下載 在項目的根目錄下執行npm install react-native-icons@latest --save，下載完成後可以在node_modules目錄下看到該外掛程式: 配置 目前只支援iOS，所以只有xcode的配置： 匯入ReactNativeIcons.xcodeproj 1.項目Libraries上右鍵： 添加項目根目錄下的node_modules/react-native-icons/ios/

今天在翻譯React native官方網站的文章時，發現了一個好東西，可以線上編輯React native程式，且可以查看運行效果，是不是比較炫酷。 網址 React Native Playground 開啟後預設介面如下: 建立應用 登陸成功後，選擇NEW APP菜單建立自己的APP，然後會出現如下介面： 然後我們點擊右邊的裝置，可以查看效果： 修改 在面板左邊的線上編輯器中進行修改後，按Ctrl+s時會即時的將效果顯示在右邊的裝置中：

AlertIOS react-native線上運行器 方法 static alert(title: string, message?: string, buttons?: Array<{ text: ?string; onPress?: ?Function; }>, type?: string)：無輸入彈出框 static prompt(title: string, value?: string, buttons?: Array<{ text: ?

源碼 /** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var { AppRegistry, StyleSheet, Text, View,} = React;var helloworld = React.createClass({ render: function() {

學習完React Native抽時間來看看它的基礎React，利用ATom來搭建Reactjs開發環境 atom github官方推出的編輯器 atom-beautify外掛程式 atom-beautify用來格式化代碼用的，在atom編輯器中開啟’Settings’面板，可以通過快速鍵Command+,來開啟,開啟後進入Install，在搜尋方塊中輸入atom-beautify，然後點擊安裝就行： atom-html-preview外掛程式

1. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 2. npm install --save-dev react-hot-loader@3.0.0-beta.6或者npm install --save-dev react-hot-loader@next 3. .babelrc配置{

1.模態modal A介面 <Modal animationType='slide' transparent={false} visible={this.state.isModal} onRequestClose={() => this.onRequestClose()}> <HalfHourHot removeModal={(data) => this.closeModal(data)}/></Modal>

A import {DeviceEventEmitter} from 'react-native';//註冊這個監聽事件componentDidMount(){ DeviceEventEmitter.addListener('xxxName’, Function);};//在組件銷毀的時候要將其移除componentWillUnmount(){ DeviceEventEmitter.remove();}; B 1 import {2

前言：顧名思義 React-native-device-info 本第三方就是為了 擷取裝置資訊。 實際上react-native有很多類似第三方，並且使用方式和本例大體相同。作為樣本記錄下，供有需要的同學學習： 1，初始化項目： 初始化一個 react-Native項目：命令： win+R // 進入命令列cd desktop //進入案頭react-Native init deviceInfoDemo // 初始化 react-native 項目:cd

項目中經常遇到拿到一個數組資料，用來迴圈渲染在html模板中的情境。比如我有以下的資料： export default[ { link:"/", label:"首頁", subMenu:[] }, { link:"/stateProp", label:"stateProp", subMenu:[] }

在Demo主要是展示一個電影資訊和在ListView展示25個電影資訊。 1、初始化一個項目並運行 開啟終端，輸入： react-native init DemoProject 輸入後初始化一個項目返回資訊如下： 有時候Installing react-native package from npm… 這一步會很慢，耐心等待，沒問題的。 init DemoProjectThis will walk you through creating a new React

組件化是react-native的最大優點之一，因為組件化我們可以做到局部重新整理，提高效能。 如圖所示 父組件包含連個子組件 添加可以動態增加子組件 log輸出： add關鍵代碼： _onPress() { if(show){/*顯示刪除時 不能添加*/ return ; } let arr = this.state.list;

這個問題想必很多人都會遇到過，這裡我說一下怎麼擷取URL中的參數。 如圖擷取purchaseOrderNo中的值。 這個時候我們需要使用一個東西： `queryString.parse(_this.props.location.search)` 通過這句話就可以獲得，我們在purchaseOrderNo傳入的值。 注意點： 如果這個值需要在頁面中及時獲得，這個時候就需要注意了，我們都知道react是有生命週期的，那麼什麼時候擷取URL的值最合適呢。

1.下載地址：https://code.visualstudio.com/Download 2.添加RN開發外掛程式 React Native Tools：微軟官方出的ReactNative外掛程式,非常好用 Reactjs code snippets：react的代碼提示，如componentWillMount方法可以通過cwm直接獲得 Auto Close Tag：自動閉合標籤 Auto Rename

寫一個簡單的Hello Word程式 <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello React!</title> <script

1、create-react-app是什麼。 做一個react項目，構建其開發環境對初學者來說是很困難的。所以，facebook專門出了create-react-app命令，用於react項目開發環境的構建。 create-react-app是基於webpack+ES6建立的。 2、如何使用。 依次在命令列執行以下命令就能完成項目的構建。 cnpm install -g create-react-appcreate-react-app my-app

一個React Native的iOS應用 從開始到上線的過程精簡記錄。 開發電腦為Mac，所以下面的命令對應Mac下的操作。 首先開啟官方Getting Started文檔，按照指南一步一步配置環境。 官方Getting Started 文檔 這個開始前假設你的電腦的 npm 等工具已經安裝。 npm install -g react-native-cli 下載Xcode 7.0 或更高 react-native init {你的項目名字}cd

功能需求 1>初始化時 展示 1次 圖片，1秒後，隱藏圖片 2>點擊 按鈕 展示 1次 圖片，1秒後，隱藏圖片 原理 綁定this本身，使用匿名函數 使用setTimeout定時 代碼 主要代碼  1>componentDidMount 載入完畢以後，執行一次  2>showSaveCover 展示後，立即執行隱藏

現在的手機品牌和型號越來越多，導致我們平時寫布局的時候會在個不同的行動裝置上顯示的效果不同， 比如我們的設計稿一個View的大小是300px，如果直接寫300px，可能在當前裝置顯示正常，但到了其他裝置可能就會偏小或者偏大，這就需要我們對螢幕進行適配。 安卓原生的話有自己的適配規則，可以根據不同的尺寸建立不同的檔案夾，系統會根據當前的裝置尺寸取對應的大小的布局。而RN本身並沒有適配規則，而原生的又比較反鎖，這就需要我們自己去對螢幕進行適配。 先看一下剛出爐的螢幕適配工具類：

執行個體 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Factories</title></head><body><!-- Target Container --><div id="react-container"></div><!-