安裝步驟
- 1.安裝依賴
必須安裝的依賴有：Node外遇、Python2票灰、JDK 和 Android Studio（ Node 的版本應(yīng)大于等于 12女阀，Python 的版本必須為 2.x（不支持 3.x）宅荤，而 JDK 的版本必須是 1.8（目前不支持 1.9 及更高版本）） - 2.cmd安裝
nrm 管理npm下載源：npm install nrm -g和nrm ues taobao
react-native-cli native腳手架：npm install react-native-cli-g - 3.配置環(huán)境變量
ANDROID_HOME---安卓sdk所在的目錄
platform-tools 平臺(tái)工具：
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools;
Java jdk/bin 目錄：
C:\Program Files\Java\jdk1.8.0_202\bin - 4.初始化項(xiàng)目
npx react-native init myapp
添加安卓依賴包的源地址（阿里）：android/build.gradle - 5.連接模擬器（mumu）
先打開mumu模擬器，然后cmd輸入adb connect 127.0.0.1:7555 - 6.運(yùn)行項(xiàng)目
npx react-native run-android - 7.在VSCode里打開該項(xiàng)目
修改APP.js浸策，制作自己想要的頁面效果
核心組件和原生組件
JSX——是一種在 JavaScript 中嵌入 XML 結(jié)構(gòu)的語法
例如：<View><Text>Hello world!</Text></View>寫法
Props（屬性）
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
{pic}外圍有一層括號(hào)冯键，我們需要用括號(hào)來把pic這個(gè)變量嵌入到 JSX 語句中。括號(hào)的意思是括號(hào)內(nèi)部為一個(gè) js 變量或表達(dá)式庸汗，需要執(zhí)行后取值惫确。
自定義的組件也可以使用props。通過在不同的場(chǎng)景使用不同的屬性定制蚯舱，可以盡量提高自定義組件的復(fù)用范疇改化。只需在render函數(shù)中引用this.props，然后按需處理即可枉昏。下面是一個(gè)例子：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop: 50}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
最終3個(gè)名字會(huì)被依次輸出陈肛。
State（狀態(tài)）
我們使用兩種數(shù)據(jù)來控制一個(gè)組件：props和state。props是在父組件中指定兄裂，而且一經(jīng)指定句旱，在被指定的組件的生命周期中則不再改變。對(duì)于需要改變的數(shù)據(jù)晰奖，我們需要使用state谈撒。
一般來說，需要在class中聲明一個(gè)state對(duì)象匾南，然后在需要修改時(shí)調(diào)用setState方法啃匿。典型的場(chǎng)景是在接收到服務(wù)器返回的新數(shù)據(jù)，或者在用戶輸入數(shù)據(jù)之后蛆楞。你也可以使用一些“狀態(tài)容器”比如Redux來統(tǒng)一管理數(shù)據(jù)流立宜。
每次調(diào)用setState時(shí)，BlinkApp 都會(huì)重新執(zhí)行 render 方法重新渲染臊岸。
【注意】：
- 一切界面變化都是狀態(tài)state變化
- state的修改必須通過setState()方法
- this.state.likes = 100; // 這樣的直接賦值修改無效！
- setState 是一個(gè) merge 合并操作尊流，只修改指定屬性帅戒，不影響其他屬性
- setState 是異步操作，修改不會(huì)馬上生效
樣式的書寫
在return里面寫：
<View>
<Text style={[styles.red,styles.big]}>我是內(nèi)聯(lián)樣式文本</Text>
<Text style={{fontWeight:"bold"}}>我是行內(nèi)樣式文本</Text>
<Text style={{...styles.big,color:"yellow", fontStyle:"italic"
}}>我是內(nèi)聯(lián)+行內(nèi)混合樣式文本</Text>
</View>
在render函數(shù)外部定義樣式：
const styles = StyleSheet.create({
center:{justifyContent:"center",alignItems:"center"},
row:{flexDirection:"row",justifyContent:"space-around"},
col:{flex:1,height:180},
big:{fontSize:48},
red:{color:"#f30"}
});
文本輸入框組件
TextInput是一個(gè)允許用戶輸入文本的基礎(chǔ)組件崖技。它有一個(gè)名為onChangeText的屬性逻住，此屬性接受一個(gè)函數(shù)，而此函數(shù)會(huì)在文本變化時(shí)被調(diào)用迎献。另外還有一個(gè)名為onSubmitEditing的屬性瞎访，會(huì)在文本被提交后（用戶按下軟鍵盤上的提交鍵）調(diào)用。
觸摸組件（Button）
<Button
onPress={()=>alert("你好世界")}
title="確定"
color="#f30"></Button>
其中onPress是回調(diào)函數(shù)吁恍，title是按鈕上顯示的文字扒秸，color是按鈕顏色播演；
也可以作為警告框，擁有多個(gè)選項(xiàng)伴奥，從而彈出不同內(nèi)容：
<Button
onPress={()=>Alert.alert("小胖別吃了好嗎写烤？","你已經(jīng)160斤了！",[
{text:'不行',onPress:()=>alert("小胖：不行我餓")},
{text:'好吧',onPress:()=>alert("小胖：好吧我不吃了")},
{text:'難過',onPress:()=>alert("小胖：我是單身狗拾徙，胖點(diǎn)怕啥")},
])}
title="詢問小胖"
color="blue"></Button>
可以看到我們?cè)O(shè)置了三個(gè)選項(xiàng)洲炊，每一項(xiàng)都會(huì)彈出不同的內(nèi)容，內(nèi)容也是自己設(shè)置的尼啡；
觸摸組件（Touchable 系列組件）
這個(gè)組件的樣式是固定的暂衡。所以如果它的外觀并不怎么搭配你的設(shè)計(jì)，那就需要使用TouchableOpacity或是TouchableNativeFeedback組件來定制自己所需要的按鈕
使用TouchableHighlight來制作按鈕或者鏈接崖瞭。注意此組件的背景會(huì)在用戶手指按下時(shí)變暗狂巢。
在 Android 上還可以使用TouchableNativeFeedback，它會(huì)在用戶手指按下時(shí)形成類似墨水漣漪的視覺效果读恃。
TouchableOpacity會(huì)在用戶手指按下時(shí)降低按鈕的透明度隧膘，而不會(huì)改變背景的顏色。
如果想在處理點(diǎn)擊事件的同時(shí)不顯示任何視覺反饋寺惫，則需要使用TouchableWithoutFeedback
某些場(chǎng)景中可能需要檢測(cè)用戶是否進(jìn)行了長按操作疹吃。可以在上面列出的任意組件中使用
onLongPress屬性來實(shí)現(xiàn)西雀。
滾動(dòng)視圖
ScrollView是一個(gè)通用的可滾動(dòng)的容器萨驶，可以在其中放入多個(gè)組件和視圖，而且這些組件并不需要是同類型的艇肴。ScrollView 不僅可以垂直滾動(dòng)腔呜，還能水平滾動(dòng)（通過horizontal屬性來設(shè)置）。
ScrollView適合于顯示數(shù)量不多的滾動(dòng)元素再悼。放置在ScrollView中的所有組件都會(huì)被渲染
長列表
FlatList組件用于顯示一個(gè)垂直的滾動(dòng)列表核畴，其中的元素之間的結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
FlatList和ScrollView不同的是冲九，FlatList并不立即渲染所有元素谤草，而是優(yōu)先渲染屏幕上可見的元素。
FlatList組件必須的兩個(gè)屬性是data和renderItem莺奸。data是列表的數(shù)據(jù)源丑孩，而renderItem則從數(shù)據(jù)源中逐個(gè)解析數(shù)據(jù)，然后返回一個(gè)設(shè)置好格式的組件來渲染灭贷。
例如渲染數(shù)據(jù)：
<FlatList
keyExtractor={item=>item.ID}
data={this.state.movies}
numColumns={3} //一行顯示3個(gè)
columnWrapperStyle={styles.row} //增加下方寫的樣式
renderItem={({item})=>{return(
<View style={{marginTop:20}} key={item.ID}>
<Image
style={{width:135,height:160}}
source={{uri:item.defaultImage}}></Image>
<Text style={{marginTop:5,textAlign:"center"}}>{item.MovieName}</Text>
</View>
)}}
/>
- flatList長列表組件温学，
- keyExtractor是key抽取
- data數(shù)據(jù)指定
- numColumns行的數(shù)量，
- renderItem列的渲染
- columnWrapperStyle行的樣式指定
網(wǎng)絡(luò)請(qǐng)求
一般長列表的數(shù)據(jù)都是通過網(wǎng)絡(luò)請(qǐng)求獲取的甚疟；然后渲染到頁面仗岖；
傳統(tǒng)方式如下：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST', //請(qǐng)求方式
headers: {
'Content-Type': 'application/x-www-form-urlencoded', //請(qǐng)求頭
},
body: 'key1=value1&key2=value2', //請(qǐng)求體
});
上面的示例演示了如何發(fā)起請(qǐng)求逃延。很多情況下，你還需要處理服務(wù)器回復(fù)的數(shù)據(jù)箩帚。網(wǎng)絡(luò)請(qǐng)求天然是一種異步操作真友；異步的意思是你應(yīng)該提取方法會(huì)返回一個(gè)Promise，這種模式可以簡化異步風(fēng)格的代碼;
如下所示：
function getMoviesFromApiAsync() { //獲取電影xx的方法紧帕，自己創(chuàng)建的
return fetch('https://facebook.github.io/react-native/movies.json') //接口網(wǎng)站
.then((response) => response.json()) //將請(qǐng)求到的數(shù)據(jù)轉(zhuǎn)為json格式
.then((responseJson) => {
return responseJson.movies; //請(qǐng)求成功返回?cái)?shù)據(jù)
})
.catch((error) => {
console.error(error); //請(qǐng)求失敗盔然，輸出錯(cuò)誤
});
}
