小白的學習筆記 —— React環境構建 & 常用語法
我是小白,一名勵志 被生活所迫 走向全棧工程師的小同學,心情美美噠。今天,我又開始了我的學習路程,今天開始的這一章節,是前端——作為一個嚴重強迫症患者本人最不願意觸碰的領域 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基礎的同學,研究一小會兒就能搞明白啦~
感謝你的閱讀哦~有任何問題可以在評論區指出來!感謝!