React-native基礎介紹
JSX語法
如果僅僅是開發react/react-native,個人覺得,沒必要專門學習什麼是jsx,我們只需要它的一些基本的知識就足夠了。
jsx語法,一定要記住這樣的一句話,它是把HTML模板和JavaScript進行混寫的一種語法風格。使用<>來寫HTML,使用{}來寫JavaScript。jsx的基本語法規則就是:遇到HTML標籤(以 < 開頭),就用HTML規則解析,遇到程式碼塊(以 { 開頭)就用JavaScript規則解析。
比如,下面這樣就是JSX語法:
<div>{this.props.title}</div>
其中,<>中表示的都是標籤,而{}中表示的都是js。
關於jsx語法,一般在模板中可以插入變數、陣列,如果是陣列,則直接會展開陣列的成員。
模板中也可以插入函式,這個函式的返回值一般是一個變數、陣列、或者是模板。
React-native的基礎開發目錄
通過執行react-native命令列工具實現
react-native init App//構建這樣的一個專案目錄
cd App//進入到這個目錄中
react-native run-android//啟動這個專案
其中有兩個入口,一個是index.android.js,另一個是index.ios.js。分別代表著android應用入口和ios應用入口。你想實現什麼型別的App,就在什麼樣的入口檔案編寫程式碼。
//我們自己的程式碼,就寫在src的目錄下。
一個最簡單的hello world的 rn介面。
//index.android.js
import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件,叫App。
class App extends Component{
render(){
return (
<Text>Hello world!</Text>
)
}
}
AppRegistry.registerComponent('App' ,()=>App);//註冊一個名字叫App的專案
如果這個示例讓你看起來陌生,那我覺得你應該瞭解一些ES6相關的知識。它有許多的新特性,如這個示例中的 import、from、class、extends、以及 ()=>{}等等。
這裡的 return 在一般函式中,會return一個變數,可以在JSX語法中,就能return一個模板。也就是 JavaScript 中嵌入HTML。
在web介面中,我們的HTML是
或者 等標籤,這裡的 是 react-native 的原生元件。樣式
在 web 網頁中,樣式是使用 css 檔案,使用 class、id 等等的選擇器來寫樣式。(也有內聯樣式)。
在 react 中,它也是使用 className 的方式或者 物件 的方式來寫樣式。
在 react-native 中,樣式是使用 JavaScript 物件來表示的。
//web
<div class='container'></div>
.container{
width:100px;
height:100px;
}
//react
<div className="container"></div>
.container{
width:100px;
height:100px;
}
//react-native
<View style={style.container}></View>
const styles = StyleSheet.create({
container:{
width:100,
height:100
}
});
內聯樣式的寫法:(針對react和react-native)
<TextInput
style={{borderRadius:Env.font.base*15}}
placeholder='搜尋'
underlineColorAndroid="transparent"
onChangeText={(text)=>this.onChangeEvent(text)}
/>
這個是react(包括react-native)的內聯樣式的寫法,可以看到,有兩個{ },其中外層的{ }代表JSX語法,而內層的{ } 代表的是物件。這就是為什麼在上面的樣式中,可以寫成 style={ styles.container } 的方式。
我們知道,在JSX語法中,{ }中可以包含一個變數,這個變數也可以是個陣列,而當我們想給react / react-native 新增多個 ‘class’或者‘樣式物件’時,我們可以使用陣列的方式,例如:
<Text style={[obj,{color: 'red'}]}>{item.carNumber}</Text>
其中:obj以及{ color: ‘red’ } 都代表樣式物件。
item.carNumber 代表JSX語法,模板中嵌入的變數。
state以及props
react中的一對非常重要的概念就是 state 和 props。
<1>state:
先看一個 state 的示例:
import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件,叫App。
class App extends Component{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
<View>
<TouchableOpacity onPress={()=>this.setState({isShow:!this.state.isShow})}>
<Text>toggle<Text>
</TouchableOpacity>
{
this.state.isShow ? <Text>Hello world!</Text> : null
}
</View>
)
}
}
AppRegistry.registerComponent('App',()=>App);
這個demo的功能就是:點選toggle按鈕,進行切換是否展示 hello world。
我預設大家都是新手,建議這個示例自己動手敲 3 遍以上。可以說,這個是理解 react-native 的基礎和核心內容非常重要的一個示例,不要嫌它簡單。
state:翻譯成中文叫做“狀態”,什麼是“狀態”,狀態代表了一個事物,在某些時刻是這樣的,在某些時刻是那樣的。所以,“狀態”它包含的一個重要屬性就是—可以改變。當我改變了“狀態”,頁面的展示也就改變了。
上面的三目運算子 this.state.isShow ? hello world! : null 表示:如果我的“狀態”isShow為true時,展示hello world,如果為 false 時,不展示任何東西。
<2>props:
props又是什麼?直接看一個示例:
mport React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件,叫App。
class App extends Component{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
<View>
<Child title='mapbar_front'/>
</View>
)
}
}
class Child extends Component{
render(){
return <Text>hello,{this.props.title}</Text>
}
}
AppRegistry.registerComponent('App',()=>App);
這個介面最終會展示:hello,mapbar_front
理解props,必須要知道的一個概念是父元件和子元件。
props:翻譯成漢語就是“屬性”,屬性的一大特點就是代表某個事物固定的,穩定的東西。它所包含的另一層含義就是–不可改變。
<3>來源:
props的來源:一般是父元件。多用於傳值或者響應事件。
state的來源:就是自身,但是可以把 props的值賦值給state。
雖然,我們自己不用父元件傳值,直接申明一個this.props.title = ‘hello’,可是我們想一想,這樣有什麼用?為什麼不用this.state.title呢?
開發react專案的一個固有思維就是—props就是用來父子元件相互通訊用的。state就是用來保持介面狀態的。其他的一切操作都是費操作,或者不規範的操作。
this.setState()函式。
如何改變state?從而使得頁面發生改變?
在react的設計中,this.setState()就是用來做這個事情的。它的引數是一個物件,用來給 state 賦值使用。
例如,上面的示例中,我們通過onPress事件,也就是web頁面的onClick事件,對state進行改變。改變的值是對this.state.isShow進行取反操作。
基本語法如下:
this.setState({
key:value
});
其中key就是在constructor中申明的state,比如上面的isShow。
元件生命週期
元件的生命週期如下:除了常用的幾個,其他我們只需要明白他們的意思就行,什麼時候執行了哪個生命後期函式。
constructor()、componentDidMount()、componentWillUnMount()、render()這四個是經常使用的生命週期函式。)
constructor() //建構函式,比較常見的用法是,在這個函式中設定 state 。
componentWillMount() //進行一些業務的初始化的東西。
componentDidMount()//元件已經載入完成,在這個中可以進行ajax請求相關的非同步操作。
render()//介面渲染,絕對不能進行setState操作
componentWillReceiveProps()//可呼叫this.setState()更新你的元件狀態
shouldComponentUpdate()//預設情況下這個函式永遠返回true保證資料變化時候UI同步更新
componentWillUpdate()//做一些更新介面之前要做的東西
componentDidUpdate()//元件更新完畢,執行該方法
componentWillUnMount()//元件解除安裝前,通常的用法的對某些定時器的清除。
條件渲染和列表渲染
條件渲染和列表渲染是單頁面應用最常見的需求,不同的框架有不同的實現方式。比如,在angular中,使用 ng-if 來實現條件渲染。使用 ng-for 實現列表渲染。
在 react 中,是通過它自己的方式來實現條件渲染和列表渲染。這種方式是由 react 自身的特性所決定。因為JSX語法的特性,它可以使用三木運算的方式實現條件渲染,使用陣列的方式實現列表渲染。
import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件,叫App。
class App extends Component{
constructor(props){
super(props);
this.state = {
isShow:true,
list:['China','USA','Jpan']
}
}
render(){
return (
<View>
{ this.state.isShow?<Text>show is true</Text>: <Text>show is false</Text>}
{
this.state.list.map((item,index) => <Text key={index}>item</Text>)
}
</View>
)
}
}
AppRegistry.registerComponent('App',()=>App);
其中,第一個{ } 中表示條件渲染,第二個{ } 中表示列表渲染。
網路請求
在一般的web網頁中,使用ajax進行資料請求,web網頁也使用jQuery的api進行資料請求,但是在react-native中,由於jQuery使用了一些瀏覽器有的而native沒有的東西,所以react-native不使用jQuery。
fetch是react-native提倡的獲取資料請求的方式。
基本使用方式:
fetch('https://mywebsite.com/mydata.json')
fetch的第二個引數是用於定製Http請求的一些引數
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
react-native支援XMLHttpRequest物件。所以有些ajax的封裝庫是可以使用的,我們自己也可以對其進行封裝。
fetch函式返回的是個Promise物件,它有then()方法和catch()方法。then()方法接受一個攜帶回調成功返回資料的函式。catch()接受攜帶請求失敗的資訊的一個函式。
基本格式:
fetch('url').then(res => {
return res.json()
}).then(res => {
console.log('想要的資料:',res.data);
})
相關推薦
React-native基礎介紹
JSX語法 如果僅僅是開發react/react-native,個人覺得,沒必要專門學習什麼是jsx,我們只需要它的一些基本的知識就足夠了。 jsx語法,一定要記住這樣的一句話,它是把HTML模板和JavaScript進行混寫的一種語法風格。使用<&g
react native基礎
初始化 dcom 更新 con one stat The 銷毀 變化 react native 的兩個核心的屬性控制改變組件:props和state。props是在父組件中進行設置,只要設置完成那麽在組件的生命周期就定死了,不會發生改變。針對數據變化修改的情況,我們需要使用
React Native基礎元件
轉載請註明出處:小樓一夜聽春雨的專欄http://blog.csdn.net/win816723459/article/details/54134171 本節主要介紹以下元件 View 容器元件(同Html中的div標籤) Text 文字元件(同Html中的p標籤)
美團React Native基礎元件庫beeshell詳解
近年來,伴隨著大前端概念的提出和興起,移動端和前端的邊界變得越來越模糊,湧現了一大批移動跨平臺開發框架和模式。從早期的PhoneGap、inoc等Hybird技術,到現在耳熟能詳的React Native、Weex和Flutter等技術,無不體現著移動端開發的前
React Native 基礎篇
雖然React Native出來已經很久了,但是還是想分享一下。技術這東西更新的太快,覺得有用就學,不能猶豫,不然什麼都不會。 一,環境配置 1,這裡講的是window+android配置,如果想了解其他配置請去官網檢視(http://reactnative.cn/) 2,本人
React Native基礎&入門教程:初步使用Flexbox佈局
在本篇裡,讓我們一起來了解一下,什麼是Flexbox佈局,以及如何使用。 一、長度的單位 在開始任何佈局之前,讓我們來首先需要知道,在寫React Native元件樣式時,長度的不帶單位的,它表示“與裝置畫素密度無關的邏輯畫素點”。 這個怎麼理解呢? 我們知道,螢幕上一個發光的最小點,對應著一
React Native基礎&入門教程:以一個To Do List小例子,看props和state
本文由葡萄城技術團隊於部落格園原創並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 在上篇中,我們介紹了什麼是Flexbox佈局,以及如何使用Flexbox佈局。還沒有看過的小夥伴歡迎回到文章列表點選檢視之前的文章瞭解。 那麼,當我們有了基本
React Native基礎&入門教程:除錯React Native應用的一小步
React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中,使用瀏覽器的除錯工具去Debug移動端的程式碼,無疑是最吸引開發人員的特性之一。 試想一下,當你在手機螢幕按下一個按鈕,處理事件的程式碼就可以立即在瀏覽器的除錯工具裡進行斷點除錯,而且每當你對程式碼進行修改,介面便可以完成
React Native 基礎 之ListView實現吸頂效果
當滑動時,這個section header會固定在頭部,也就是吸頂效果。但是遺憾的是,在Android平臺上不支援吸頂效果 實現吸頂效果需要用到此方法 cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIde
React Native基礎&入門幸運28加拿大28原始碼下載網站開發教程:除錯React Native應用的一小步
React Native(幸運28加拿大28原始碼下載網站開發【大神原始碼論壇】dsluntan.com 【布丁原始碼論壇】budingbbs.com 企娥3393756370)為傳統前端開發者打開了一扇新的大門。其中,使用瀏覽器的除錯工具去Debug移動端的程式碼,無疑是
React-Native 基礎(二) 使用Props實現傳參定製
官方庫提供的props 下面以Image為例,這裡的source和style就是props.<Image source={pic} style={{width: 193, height: 110}}中pic外面的{}表示其內部是一個變數或者表示式,任
React-Native 基礎(四)使用style定義元件的樣式
style是一個props style的鍵值命名格式遵循CSS風格,除了名字使用駝峰法則而不是使用分隔符。例如背景色:backgoundColor,不是background-color 可以傳遞style陣列,最後一個style有優先權,因而可以使用它繼承
React Native 基礎篇 之 ListView 產品列表實現
1.為了測試用的是本地圖片,首先圖片資源整合到專案中。 這裡是android適配的專案 將圖片資源放置在下面 通過json 方式訪問 專案名稱\android\app\src\main\res\drawable 檔案 NewWine.json { "data":[
react native props state 網絡請求 native組件等一些基礎知識
tex ntc 引擎 dict events 容量 通過 one should > js 的6種類型 number string Boolean object function undefined >給對象添加一個屬性 let a ={} Object.as
使用WebStorm開發React-native之基礎
ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題: (1)找不到SDK路徑,或者沒有SDK對應的版本:SDK必須是android-23才可以(更新SDK) 解決方法:環境變量,必須設置Android_HOME
react native 0.5項目目錄介紹
lock 文本文 通用組 gas app.js Redux editor commons ant ├── src // Ract Native │ ├── app // redux部
react-native導航器 react navigation 介紹
開發環境搭建 部署 ica sam native 找不到 組件 getting start 開發環境搭建好之後,想要進一步了解react-native,可以先從react-native官網上的電影列表案例入手: https://reactnative.cn/docs/0
react-native App的原理介紹
nat image prop 效果 沒有 結構 內部 div 單向 react-native App中,大體可以理解為:整個APP作為容器,裏面存放有多個父組件,子組件,孫子組件,各個組件都含有state和props這兩個最重要的屬性. 如下圖所示: React 有pro
Expo大作戰--針對已經開發過react native項目開發人員有針對性的介紹了expo,expo的局限性,開發時項目選型註意點等
文本 問題 span cli doc 包括 scrip 界面 生命周期 簡要:本系列文章講會對expo進行全面的介紹,本人從2017年6月份接觸expo依賴,對expo的研究斷斷續續,一路走來將近10個月,廢話不多說,接下來你看到內容,講全部來與官網 我猜去全部機
React Native 入門基礎知識總結
入門 部署 社區 另一個 變化 started EDA set rop 中秋在家閑得無事,想著做點啥,後來想想,為啥不學學 react native。在學習 React Native 時, 需要對前端(HTML,CSS,JavaScript)知識有所了解。對於JS,可以看看