尊重他人的劳动成果，转载请标明出处：http://www.jb51.cc/article/p-yjdtmhuy-bqs.html， 本文出自:【gengqiquan的博客】
安装
- 要按官方文档操作，不要瞎百度，瞎按博客操作
- 使用（react-native init 你的项目名字 –version 0.44.3 ）生成对应版本的项目，不同版本有差异，初学者容易掉某明奇妙的坑里，选择你手里教程对应的版本，拿官方文档做教程的选择beta版本，不要选测试版本，不要选测试版本，不要选测试版本
- 项目目录下运行命令 react-native run-ios （或者 react-native run-android ）
项目结构
- 新建文件夹作为项目代码的存放文件夹，一般叫src（在项目的跟目录下，是项目的根目录，不是项目所在文件夹的根目录，如果你不懂什么叫项目的跟目录，记得和node_modules平级就行）
- 新建文件夹用于存放公共图片。支持2@和3@尾缀，会自动适应。图片引用文件名不需要加2@,比如ic_photo2@.png只需要写ic_photo.png就行
引用路径
- ./是当前平级目录，通过这个引用可以找你的兄弟。
- ../是向上一级目录，也就是当前路径的父级目录。通过这个引用可以找你的叔叔们。一个../只代表向上跳一级，要找爷爷级请加两个，也就是../../，以此类推
导入组件
module.exports = {
某组件名,某变量名,某方法名,}
JSON
js里面json文本就是个对象。不需要赋值不需要解析可以直接当做对象用
例如
var options = {
url: '/util/car/car_price',method: 'POST',data: `prov=${prov}&city=${city}&model=${modelID}`,}
就可以直接用
options.method
来操作他的属性method
所以你要声明数组可以直接写一个数组的JSONARRAY变量
如
var list= [
'年利率','月利率','月供'
]
这里的list就是数组对象，而不是字符串，要声明字符串请在两端加上引号或者双引号
所以网络请求返回过来的如果是json格式也是可以直接当做对象操作，不需要额外解析。哦，就是对象，不需要当做。
界面跳转与传值
- 跳转
RN本质上是js。也就是前端那一套，没有原生界面跳转的概念，所有的界面跳转本质上就是组件的替换。为了达到与原生一致的界面切换体验，跳转必须要借助Navigator，Navigator可叠加使用，必须在跳转前提前静态声明
const AppNavigator = StackNavigator({ Main: {screen: Main},CarModelSelect: { screen: CarModelSelect,},CityView: { screen: CityView,ResultView: { screen: ResultView,});
this.props.navigation('CarModelSelect')
this.props.navigation.goBack()
这里的navigation就是控制跳转的Navigator的对象，感兴趣的同学可以打印出来观察。js可以直接打印对象，console.debug(对象) 就可以
- 传值
this.props.navigation()
对象方法的第一个参数就是要跳转界面的路由路径，第二个参数就是需要传递的值对象
this.props.navigation('CarModelSelect',{title:"标题"
modelSelect: ( name) => {
}
})
上面这段代码演示了传递title这个字段和modelSelect（name）这个方法的传递。前面说了。js里啥都是对象，所以方法自然也是对象。也可以当做值直接传递过去，所以界面之间的方法回调大家应该知道怎么使用了
* 取值
var title = this.props.navigation.state.params.title
this.props.navigation.state.params.modelSelect("小明")
上面代码演示了如何取得之前界面传递过来的title值和如何调用回调方法modelSelect(name)
this.props.navigation('另一个界面的路由路径')
this.state
界面上的一切现实变化都需要通过this.state来控制。this.state里的值改变了自然会刷新与他绑定的界面属性（文本，位置，高宽，动画等）
- this.setState();
setState不是立即执行的，延迟更新的原因在于—state是异步执行的，只有render发生变化的时候才触发this.setState()
列表
- SectionList与FlatList所需要的数据源的格式是必须的。也就是必须要有key与data字段。当然可以通过
keyExtractor={(item,index) => item.city_name}
方法来指定key。但是没有方法来指定data，由于这个奇葩的设计。大部分实际情况下需要手动格式化你的数据源成[“key”:”key”,”data”:[]]的格式
- getItemLayout可以计算列表高度。推荐实现此方法，实际使用中你不实现列表加载的性能差的爆表，经常不忍直视。
- 分隔线 ItemSeparatorComponent可以用来做垂直分隔线。不能用来做水平分隔线，所以多列的情况你可以指定每个item的左边距然后给列表加个paddingRight来实现水平分割线。（coder的智慧是无限滴）
有什么建议的可以留言喔
如果我的博客对您有帮助，请留言鼓励下或者点个赞吧！
