RN對于剛剛上手，并且沒有接觸過相關(guān)編寫方式的新人來說并不是十分的友好，至少我看來相關(guān)問題的提問都不多，所以一般遇到問題想要百度解決，可以說是非常難的一件事。
所以在這里將自己在學(xué)習(xí)以及使用RN時(shí)遇到的要點(diǎn)，跟大家分享，希望對剛接觸RN的人有所幫助吧。
首先有一點(diǎn)是需要明確的，接觸RN的時(shí)候就應(yīng)該摒棄掉那種，在百度上找，有了答案就盲目抄抄抄的想法，需要的是靜下心來，好好探究一下這樣子做的目的到底是什么，哪怕你現(xiàn)在真的非常的趕。畢竟RN被提出來并且“貼在百度上”的問題并不全面。
一、npm intall 方式導(dǎo)入依賴出現(xiàn)wrong或warming
如果你在使用npm install方式下載依賴的時(shí)候出了問題，紅色的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í)候需要注意，剛起步的新人可能沒有上github的習(xí)慣，但其實(shí)github上面有相關(guān)組件的詳細(xì)介紹。你可以通過百度找到組件的名字，一般的，寫相關(guān)使用文檔的作者都會附上這個(gè)組件的github網(wǎng)址。去看看！看清楚相關(guān)的組件可能需要你在項(xiàng)目手動加配置文件，也可以直接使用link，但是你可能會發(fā)現(xiàn)，項(xiàng)目啟動會報(bào)無法解決依賴的錯誤，原因是在很多百度上的案例都沒有提及的。
但github上會有這么一個(gè)步驟：
項(xiàng)目目錄\android\build.gradle
allprojects {
......
repositories {
......
maven { url "https://jitpack.io" } //這個(gè)需要添加
}
}
三、setState是一個(gè)核心用法
基本上每一個(gè)新建的類文件，都會在構(gòu)造方法上創(chuàng)建this.state={}，這里面的值，是可以用setState進(jìn)行修改，且每次修改后，都會更新一次render，可以理解為頁面的刷新。至于他是怎么更新的頁面這里有涉及到RN里Virtual Dom的相關(guān)原理，這里不做詳細(xì)介紹，有興趣可以百度一下。
靈活的配合使用
this.state={}
this.setState({})
既然setState能夠控制頁面刷新，那就是很多的功能都需要靠這個(gè)方式去實(shí)現(xiàn)，舉一個(gè)最簡單的例子：
做一個(gè)可收起與展示更多的按鈕
export default class TelescopicBtn extends Component{
constructor(props){
super(props);
this.state = {
state:0,
subHeight:70, //按鈕下方子模塊高度
show:false, //展開或收起
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',
}
});
在頁面渲染完成之后，每次點(diǎn)擊該按鈕，都會調(diào)用_telescopic()這個(gè)方法，該方法更改this.state內(nèi)的參數(shù)，使得高度以及小標(biāo)題改變，以此來達(dá)到收起與展開的效果。
小章結(jié)語
發(fā)起第一篇技術(shù)文章，也希望覺得不錯的書友點(diǎn)個(gè)喜歡或是分享。以上是我的學(xué)習(xí)、制作中遇到的難處以及自己的一些總結(jié)與理解，我會在往后的每一篇中提及三個(gè)新接觸RN時(shí)要注意的點(diǎn)，如有不對之處歡迎大家的指正，我都會虛心的請教嘿嘿嘿。
芥末的開源RN：https://github.com/Eugenehyj/react-native-ShotTravelProject.git一個(gè)驢友圈分享功能，包括了后臺，使用文檔以及部分源碼還在完善之中。
——“小白”的前端之路
