RN對(duì)于剛剛上手缆蝉，并且沒(méi)有接觸過(guò)相關(guān)編寫方式的新人來(lái)說(shuō)并不是十分的友好晓铆，至少我看來(lái)相關(guān)問(wèn)題的提問(wèn)都不多贮匕，所以一般遇到問(wèn)題想要百度解決姐仅，可以說(shuō)是非常難的一件事。
所以在這里將自己在學(xué)習(xí)以及使用RN時(shí)遇到的要點(diǎn)刻盐，跟大家分享掏膏，希望對(duì)剛接觸RN的人有所幫助吧恳谎。
首先有一點(diǎn)是需要明確的弥喉，接觸RN的時(shí)候就應(yīng)該摒棄掉那種，在百度上找滔韵，有了答案就盲目抄抄抄的想法乙墙，需要的是靜下心來(lái)颖变，好好探究一下這樣子做的目的到底是什么生均，哪怕你現(xiàn)在真的非常的趕。畢竟RN被提出來(lái)并且“貼在百度上”的問(wèn)題并不全面腥刹。
一马胧、npm intall 方式導(dǎo)入依賴出現(xiàn)wrong或warming
如果你在使用npm install方式下載依賴的時(shí)候出了問(wèn)題，紅色的wrong提示衔峰，在你不確定是否能夠正確使用時(shí)漓雅，你其實(shí)可以考慮使用官方推薦的yarn。
具體安裝方式看官網(wǎng)朽色，yarn add 代替了 npm install 的使用邻吞，所以你在下載組件的時(shí)候可使用：
yarn add react-native-xxx（這里是第三方租件）
等價(jià)于 npm install react-native-xxx
二、React Native使用第三方組件
使用第三方組件的時(shí)候需要注意葫男，剛起步的新人可能沒(méi)有上github的習(xí)慣抱冷，但其實(shí)github上面有相關(guān)組件的詳細(xì)介紹。你可以通過(guò)百度找到組件的名字梢褐，一般的旺遮，寫相關(guān)使用文檔的作者都會(huì)附上這個(gè)組件的github網(wǎng)址。去看看盈咳！看清楚相關(guān)的組件可能需要你在項(xiàng)目手動(dòng)加配置文件耿眉，也可以直接使用link，但是你可能會(huì)發(fā)現(xiàn)鱼响，項(xiàng)目啟動(dòng)會(huì)報(bào)無(wú)法解決依賴的錯(cuò)誤鸣剪，原因是在很多百度上的案例都沒(méi)有提及的。
但github上會(huì)有這么一個(gè)步驟：
項(xiàng)目目錄\android\build.gradle
allprojects {
......
repositories {
......
maven { url "https://jitpack.io" } //這個(gè)需要添加
}
}
三丈积、setState是一個(gè)核心用法
基本上每一個(gè)新建的類文件筐骇，都會(huì)在構(gòu)造方法上創(chuàng)建this.state={}，這里面的值江滨，是可以用setState進(jìn)行修改铛纬，且每次修改后，都會(huì)更新一次render唬滑，可以理解為頁(yè)面的刷新告唆。至于他是怎么更新的頁(yè)面這里有涉及到RN里Virtual Dom的相關(guān)原理，這里不做詳細(xì)介紹晶密，有興趣可以百度一下擒悬。
靈活的配合使用
this.state={}
this.setState({})
既然setState能夠控制頁(yè)面刷新，那就是很多的功能都需要靠這個(gè)方式去實(shí)現(xiàn)惹挟，舉一個(gè)最簡(jiǎn)單的例子：
做一個(gè)可收起與展示更多的按鈕
export default class TelescopicBtn extends Component{
constructor(props){
super(props);
this.state = {
state:0,
subHeight:70, //按鈕下方子模塊高度
show:false, //展開(kāi)或收起
subTitle:'更多', //按鈕小標(biāo)題
};
}
//點(diǎn)擊事件
_telescopic = () =>{
if(this.state.show){
this.setState({
subHeight:70,
show:false,
subTitle:'更多',
})
}else{
this.setState({
subHeight:140,
show:true,
subTitle:'收起',
})
}
}
render(){
return(
<TouchableOpacity
style={[styles.button,{backgroundColor:'white'}]}
onPress={()=>{this._telescopic();}}
>
<View style={{flex:10,}}>
<Text style={styles.buttonTxt}>{this.props.name}</Text>
</View>
<View style={{flex:6,}}>
<Text style={{textAlign:'right',}}>
{this.state.subTitle}
</Text>
</View>
</TouchableOpacity>
<View style={[styles.subTool,{height:this.state.subHeight,}]}>
<View style={styles.oneItem}>
<Text>想要展示的內(nèi)容</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
button:{
height:50,
backgroundColor:'white',
flexDirection:'row',
alignItems:'center',
justifyContent:'space-around',
borderWidth:.3,
borderColor:'#e0e0e0',
},
buttonTxt:{
color:'black',
marginLeft:5,
},
subTool:{
backgroundColor:'white',
borderBottomWidth:.3,
borderColor:'#e0e0e0',
overflow:'hidden',
},
oneItem:{
flexDirection:'row',
flexWrap:'wrap',
}
});
在頁(yè)面渲染完成之后茄螃，每次點(diǎn)擊該按鈕缝驳，都會(huì)調(diào)用_telescopic()這個(gè)方法连锯，該方法更改this.state內(nèi)的參數(shù)归苍，使得高度以及小標(biāo)題改變，以此來(lái)達(dá)到收起與展開(kāi)的效果运怖。
小章結(jié)語(yǔ)
發(fā)起第一篇技術(shù)文章拼弃，也希望覺(jué)得不錯(cuò)的書(shū)友點(diǎn)個(gè)喜歡或是分享。以上是我的學(xué)習(xí)摇展、制作中遇到的難處以及自己的一些總結(jié)與理解吻氧，我會(huì)在往后的每一篇中提及三個(gè)新接觸RN時(shí)要注意的點(diǎn)，如有不對(duì)之處歡迎大家的指正咏连，我都會(huì)虛心的請(qǐng)教嘿嘿嘿盯孙。
芥末的開(kāi)源RN：https://github.com/Eugenehyj/react-native-ShotTravelProject.git一個(gè)驢友圈分享功能，包括了后臺(tái)祟滴，使用文檔以及部分源碼還在完善之中振惰。
——“小白”的前端之路
