RN对于刚刚上手，并且没有接触过相关编写方式的新人来说并不是十分的友好，至少我看来相关问题的提问都不多，所以一般遇到问题想要百度解决，可以说是非常难的一件事。
所以在这里将自己在学习以及使用RN时遇到的要点，跟大家分享，希望对刚接触RN的人有所帮助吧。
首先有一点是需要明确的，接触RN的时候就应该摒弃掉那种，在百度上找，有了答案就盲目抄抄抄的想法，需要的是静下心来，好好探究一下这样子做的目的到底是什么，哪怕你现在真的非常的赶。毕竟RN被提出来并且“贴在百度上”的问题并不全面。
一、npm intall 方式导入依赖出现wrong或warming
如果你在使用npm install方式下载依赖的时候出了问题，红色的wrong提示，在你不确定是否能够正确使用时，你其实可以考虑使用官方推荐的yarn。
具体安装方式看官网，yarn add 代替了 npm install 的使用，所以你在下载组件的时候可使用：
yarn add react-native-xxx（这里是第三方租件）
等价于 npm install react-native-xxx
二、React Native使用第三方组件
使用第三方组件的时候需要注意，刚起步的新人可能没有上github的习惯，但其实github上面有相关组件的详细介绍。你可以通过百度找到组件的名字，一般的，写相关使用文档的作者都会附上这个组件的github网址。去看看！看清楚相关的组件可能需要你在项目手动加配置文件，也可以直接使用link，但是你可能会发现，项目启动会报无法解决依赖的错误，原因是在很多百度上的案例都没有提及的。
但github上会有这么一个步骤：
项目目录\android\build.gradle
allprojects {
......
repositories {
......
maven { url "https://jitpack.io" } //这个需要添加
}
}
三、setState是一个核心用法
基本上每一个新建的类文件，都会在构造方法上创建this.state={}，这里面的值，是可以用setState进行修改，且每次修改后，都会更新一次render，可以理解为页面的刷新。至于他是怎么更新的页面这里有涉及到RN里Virtual Dom的相关原理，这里不做详细介绍，有兴趣可以百度一下。
灵活的配合使用
this.state={}
this.setState({})
既然setState能够控制页面刷新，那就是很多的功能都需要靠这个方式去实现，举一个最简单的例子：
做一个可收起与展示更多的按钮
export default class TelescopicBtn extends Component{
constructor(props){
super(props);
this.state = {
state:0,
subHeight:70, //按钮下方子模块高度
show:false, //展开或收起
subTitle:'更多', //按钮小标题
};
}
//点击事件
_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>想要展示的内容</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',
}
});
在页面渲染完成之后，每次点击该按钮，都会调用_telescopic()这个方法，该方法更改this.state内的参数，使得高度以及小标题改变，以此来达到收起与展开的效果。
小章结语
发起第一篇技术文章，也希望觉得不错的书友点个喜欢或是分享。以上是我的学习、制作中遇到的难处以及自己的一些总结与理解，我会在往后的每一篇中提及三个新接触RN时要注意的点，如有不对之处欢迎大家的指正，我都会虚心的请教嘿嘿嘿。
芥末的开源RN：https://github.com/Eugenehyj/react-native-ShotTravelProject.git一个驴友圈分享功能，包括了后台，使用文档以及部分源码还在完善之中。
——“小白”的前端之路
网友评论