我是小白，一名勵志被生活所迫走向全棧工程師的小同學，心情美美哒。今天，我又開始了我的學習路程，今天開始的這一章節，是前端——作為一個嚴重強迫症患者本人最不願意觸碰的領域 o(╥﹏╥)o 。

先附上阿裡雲大學課程的連結哈~怕寫的不好，大家不懂的地方可以翻看一下

React 入門教程（開發文檔）: https://edu.aliyun.com/course/483 React前端開發入門與實戰 : https://edu.aliyun.com/course/29

還有RN中文官網 ——

https://reactnative.cn/

一、搭建開發環境

下面就需要開始使用React和React-Native開發Android的移動應用程式。

需要準備幾個軟體：

Android Studio（3.0以上版本）【這個就是為了有模拟器……可以用真機】
Nodejs
模拟器（自帶的）

首先啟動Android模拟器，可以使用指令行方式，也可以使用Android Studio的軟體方式啟動。

指令行啟動，需要先在指令行中進入到Android SDK的tools目錄下，然後執行

emulator -list-avds

列出現有的模拟器，然後可以通過

emulator @模拟器名稱

來啟動模拟器。

啟動後，通過npm指令，安裝react-native-cli支援庫。

npm install -g react-native-cli

安裝好後，應該可以在指令行中運作react-native指令。

然後在你想建立項目的檔案夾下，運作

react-native init 項目名

來建立一個項目。（mac記得加sudo）

安裝配置好後，項目環境就已經建立了，下面就是需要編譯項目并自動釋出到手機上。

這裡需要做一些準備：

配置ANDROID_HOME的環境變量（位置就是Android的SDK的根目錄）
配置PATH，在裡面多加入一個Android的adb指令的位置。

（這一步是為了能直接“召喚”你的模拟器，不用每次都去tools目錄下）

測試再次運作時，會發現出現一些錯誤提示，這是因為React本身的bug造成的。

需要我們單獨啟動包管理器（将項目打包上傳到模拟器的那個程式）

react-native start --reset-cache

（當然，用真機就不用啟動這個包管理器啦~）

然後再打開另一個指令行視窗，執行啟動指令（

react-native run-android

）

我們的項目就算是建立完成啦~完成後我們的項目内容差不多是這樣啦~

看到這個截圖，我們在開發的時候需要在App.js裡面開始編寫~

二、React基本文法 —— JSX

2.1 子產品化

可以把一些通用的功能或者界面上一樣的布局等内容，封裝到一個js檔案裡，通過導出的方式，讓其他js可以使用。

文法：

export default {所有要導出的類、變量、以及方法}

class Timer {
  getTime() {
    return new Date().getTime();
  }
}

let a = 10 ;
function test() {
  console.log("Hello World");
}
 
export default {Timer,a,test};

2.2 渲染内容到頁面上

在使用React進行開發時，所有的js必須導入React的相關支援庫。其中一個叫ReactDOM的類可以将js中的頁面代碼渲染到HTML中某個頁面元素中。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

let div = <div id="test_div">
            <font color='red'>Hello World</font>
          </div>;

ReactDOM.render(div, document.getElementById('root'));

2.3 React元件

這裡的元件就類似于HTML中的标簽，所有React元件都是一個類，繼承了React中的Component對象，并覆寫了render()方法，來生成一段html頁面。需要注意的是，在HTML中，理論上标簽不區分大小寫，但是在JSX文法中，必須小寫，大寫會被認為是React的元件。

React中為了能将一些通用的内容可以重複使用，會把一些JSX文法組成的内容封裝到一個Component裡，作為元件來使用。元件的基本文法如下：

import React, { Component } from 'react';
import './title.css';

class TitleBar extends Component {
  render() {
    // 必須通過return傳回需要的元素
    return (
        <ul>
          <li>今日最新</li>
          <li>星級評測</li>
          <li>新遊預告</li>
          <li>時下熱門</li>
        </ul>
    );
  }
}

export default TitleBar;

如果想讓元件實作一些變化，這裡React提供了props的屬性操作。

import React, { Component } from 'react';

class TitleItem extends Component {
   constructor(props) {
     super(props);
   }

   render() {
     return (
       <li>{this.props.value}</li>
     );
   }
}

class TitleBar extends Component {

  constructor(props) {
    super(props);
    let arr = this.props.allValues.split(",") ;
    let itemArray = new Array();
    for (let i = 0;i < arr.length;i++) {
      itemArray[i] = <TitleItem value={arr[i]}/>
    }
    this.itemArray = itemArray;
  }

  render() {
    // 必須通過return傳回需要的元素
    return (
      <ul>
        {this.itemArray}
      </ul>
    );
  }
}

export default TitleBar;

import React from 'react';
import ReactDOM from 'react-dom';
import TitleBar from './index/title';

ReactDOM.render(<TitleBar allValues="首頁,關于"/>,
 document.getElementById('root'));

2.4 事件處理

這裡編寫的元件也可以通過onXxxx事件來進行互動。

但是，這個互動是無法影響頁面的顯示結果的，因為頁面是在打開的時候，執行的render()來渲染，而調用事件時，預設時不重新渲染的。

這裡如果想重新渲染，需要通過修改state的屬性來實作。

import React, { Component } from 'react';
import './title.css';

class TitleItem extends Component {
   constructor(props) {
     super(props);
     this.state = {classValue:"not_selected"};
   }

   changeColor = () => {
     // console.log("0--0------");
    this.setState({
      classValue:"selected"
    });
   }

   changeColorOut = () => {
     this.setState({
       classValue:"not_selected"
     });
   }

   render() {
     return (
       <li className={this.state.classValue} onMouseOut={this.changeColorOut} onMouseOver={this.changeColor} key={this.props.value}>{this.props.value}</li>
     );
   }
}

class TitleBar extends Component {

  constructor(props) {
    super(props);
    let arr = this.props.allValues.split(",") ;
    let itemArray = new Array();
    for (let i = 0;i < arr.length;i++) {
      itemArray[i] = <TitleItem key={i} value={arr[i]}/>
    }
    this.itemArray = itemArray;
  }

  render() {
    // 必須通過return傳回需要的元素
    return (
      <ul>
        {this.itemArray}
      </ul>
    );
  }
}

export default TitleBar;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import TitleBar from './index/title';
import * as serviceWorker from './serviceWorker';

// let div = <div id="test_div">
  // <font color='red'>Hello World</font></div>;

ReactDOM.render(<TitleBar allValues="首頁,關于"/>,
 document.getElementById('root'));

熟悉以上幾點我們就可以開始開始我們的工作啦~

三、React Native的界面開發

RN的元件樣式需要通過StyleSheet來控制

1. View

控制布局的元件，類似于html、css中的div。

通過內建Component來建立導出的元件對象。通過覆寫render()方法來傳回顯示的内容，在這裡建立View進行分割界面的操作，再通過StyleSheet控制界面的比例。（比例通過flex屬性來設定）

2. Text

很明顯的文本框~用于顯示純文字。

3. Image

圖檔元件，用于顯示圖檔

4. TextInput

文本輸入框

For Example

樣式代碼

import React, {Component} from 'react';
 import {ImageBackground,Button,Dimensions,StyleSheet,Text, View,Image} from 'react-native';
// 
var {height, width} = Dimensions.get('window');

 let styles = StyleSheet.create({
   all: {
     flexDirection: 'column',
     height: height,
     backgroundColor: 'rgb(226,226,226)',
   },

   sometext: {
     flex: 5,
   },
        textitem: {
          height: height/12,
          justifyContent: 'center',
        },
          gversion: {
            flexDirection: 'row',
          },
            nowversion: {

            },
            newversion: {

            },
            newversiontext: {
              color: 'rgb(0,156,255)',
            },
 });

【備注：

内容排列方式

flexDirection: 'column'

column為豎直排列，row為水準排列。

内部元件用

flex

給數值按比例配置設定空間。】

輸出元件：

export default class Today extends Component<Props> {
   constructor(props) {
     super(props);
   }


   render() {
      return(
        <View style={styles.all}>
          <View style={styles.sometext}>
            <ImageBackground
              source={flatitembg}
              style={{width: width, height: height/12}} >
            <View style={styles.textitem}>
               <Text></Text>
            </View>
            </ImageBackground>
            <ImageBackground
              source={flatitembg}
              style={{width: width, height: height/12}} >
            <View style={styles.textitem}>
              <View style={styles.gversion}>
                <View style={styles.nowversion}><Text>      當 前 版 本 :   1.0</Text></View>
                <View style={styles.newversion}><Text style={styles.newversiontext}>（有新版本1.1）</Text></View>
              </View>
            </View>
            </ImageBackground>
            <ImageBackground
              source={flatitembg}
              style={{width: width, height: height/12}} >
            <View style={styles.textitem}>
               <Text>      官 方 網 站 :   www.ahanwhite.com（未營運）</Text>
            </View>
            </ImageBackground>
            <ImageBackground
              source={flatitembg}
              style={{width: width, height: height/12}} >
            <View style={styles.textitem}>
               <Text>      官 方 微 博 :   @白安瀚</Text>
            </View>
            </ImageBackground>
            <ImageBackground
              source={flatitembg}
              style={{width: width, height: height/12}} >
            <View style={styles.textitem}>
              <Text>      微信公衆号 :   小白的學習日記</Text>
            </View>
            </ImageBackground>
          </View>
        </View>
      );
   }
 }

完成後的代碼：

總的來說，隻要有一定的html & css基礎的同學，研究一小會兒就能搞明白啦~

感謝你的閱讀哦~有任何問題可以在評論區指出來！感謝！

小白的學習筆記 —— React環境建構 & 常用文法一、搭建開發環境二、React基本文法 —— JSX三、React Native的界面開發

一、搭建開發環境

二、React基本文法 —— JSX

2.1 子產品化

2.2 渲染内容到頁面上

2.3 React元件

2.4 事件處理

三、React Native的界面開發

1. View

2. Text

3. Image

4. TextInput

For Example

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

Android電視機（機頂盒）初次開發的一些經驗分享

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

小白的學習筆記 —— React環境建構 &amp; 常用文法一、搭建開發環境二、React基本文法 —— JSX三、React Native的界面開發

一、搭建開發環境

二、React基本文法 —— JSX

2.1 子產品化

2.2 渲染内容到頁面上

2.3 React元件

2.4 事件處理

三、React Native的界面開發

1. View

2. Text

3. Image

4. TextInput

For Example

繼續閱讀

小白的學習筆記 —— React環境建構 & 常用文法一、搭建開發環境二、React基本文法 —— JSX三、React Native的界面開發