［ReactNative入門到精通］React Native 第一個程式 Hello Word

標籤：android   react   native   helloworld   ios   

人生沒有對錯，只有選擇後的堅持，不後悔，走下去，就是對的。

React Native 項目目錄解析

上一節我們簡單的建立了一個React Native的項目AwsoneProject，我們什麼都沒有操作，就直接在模擬器上運行起來了。這裡我們詳細的看看，React Native給我們產生的這幾個檔案到底是做什麼用的。

項目目錄結構

檔案建構如所示：

• android
  android 的項目構建目錄
• ios
  iphone 的項目構建目錄
• node_modules
  react native 所引用的資產庫，項目依賴庫，打包指令碼等的目錄
• index.android.js
  這個檔案是預設產生的，但是這個可以在android目錄中的MainActivity中進行設定。如下

        mReactInstanceManager = ReactInstanceManager.builder()                .setApplication(getApplication())                .setBundleAssetName("index.android.bundle")                // 設定模組的主入口為index.android                .setJSMainModuleName("index.android")                .addPackage(new MainReactPackage())                .setUseDeveloperSupport(BuildConfig.DEBUG)                .setInitialLifecycleState(LifecycleState.RESUMED)                .build();

其內容遵循的是react 規則

/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;// 聲明一個react native項目需要包含的幾個依賴庫var React = require(‘react-native‘);var {  AppRegistry,  StyleSheet,  Text,  View,} = React;// 整個Project的入口var AwesomeProject = React.createClass({   // 渲染的方式，和渲染的內容，類似布局檔案  render: function() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.android.js        </Text>        <Text style={styles.instructions}>          Shake or press menu button for dev menu        </Text>      </View>    );  }});// 布局類型的樣式，並不是繼承於css只是包含FlexBox的屬性而已，使用時候注意文檔var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  welcome: {    fontSize: 20,    textAlign: ‘center‘,    margin: 10,  },  instructions: {    textAlign: ‘center‘,    color: ‘#333333‘,    marginBottom: 5,  },});// 註冊整個app的主入口AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

• index.ios.js
  類似Android中的js檔案，可以在xcodeproject中進行修改

/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;var React = require(‘react-native‘);var {  AppRegistry,  StyleSheet,  Text,  View,} = React;var AwesomeProject = React.createClass({  render: function() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>          Welcome to React Native!        </Text>        <Text style={styles.instructions}>          To get started, edit index.ios.js        </Text>        <Text style={styles.instructions}>          Press Cmd+R to reload,{‘\n‘}          Cmd+D or shake for dev menu        </Text>      </View>    );  }});var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: ‘center‘,    alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  welcome: {    fontSize: 20,    textAlign: ‘center‘,    margin: 10,  },  instructions: {    textAlign: ‘center‘,    color: ‘#333333‘,    marginBottom: 5,  },});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

• 打包指令檔package.json
  react native預設是是用來packager進行打包，這個就是針對於packager的打包檔案，內容如下所示

{  "name": "AwesomeProject",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node_modules/react-native/packager/packager.sh"  },  "dependencies": {    "react-native": "^0.12.0"  }}

Hello World

Ok 這裡我們自己嘗試寫一個Hello World的項目程式。這裡我們根據產生的index.android.js進行修改。

/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;var React = require(‘react-native‘);var {  AppRegistry,  StyleSheet,  Text,  View,} = React;var AwesomeProject = React.createClass({  render: function() {    return (     // 放置一個 sytle為myFont的Text 。內容為Hello World     <Text style={[styles.myFont]} >          Hello World!     </Text>    );  }});// 定義 myFont樣式 的字型大小為100var styles = StyleSheet.create({  myFont: {      fontSize:100,  }});AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

得到效果如下：

有過JavaScript基礎的同學一看應該就能夠看懂了，雖然本程式沒有使用到css，但是文法與格式都與css極為類似，可以是使其的子集。

而render的配置樣式有極為類似Android中的layout檔案編寫入模式。相信大家簡單的聯絡也能夠很快的入手。

調試注意

值得一提的是，一問我們的整個項目都是使用js來進行書寫的，所以我們的所有的項目在調試的時候都不需要重新編譯。

直接點擊Reload js既可以了，這個也就是為什麼後面說React Native能夠完成線上的Hotpatch功能，如所示：

當然沒有報錯的話，官方說模擬器可以按下F2鍵也能夠reload js，Genymotion下用 ?-M。我沒有成功過。

還是老實的再運行一遍吧。

/*
* @author zhoushengtao(周聖韜)
* @since 2015年10月11日 淩晨 1:34:20
* @weixin stchou_zst
* @blog http://blog.csdn.net/yzzst
* @交流學習QQ群：341989536
* @私人QQ：445914891
/

著作權聲明：轉載請標註：http://blog.csdn.net/yzzst 。 本文為博主原創文章，未經博主允許不得轉載。

［ReactNative入門到精通］React Native 第一個程式 Hello Word