react native 快速上手策略（一）（新人注意事项）

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一个驴友圈分享功能，包括了后台，使用文档以及部分源码还在完善之中。
——“小白”的前端之路