React-Native 知识点小结

Posted gengqiquan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Native 知识点小结相关的知识,希望对你有一定的参考价值。

尊重他人的劳动成果,转载请标明出处:http://blog.csdn.net/gengqiquan/article/details/78435999, 本文出自:【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就行

引用路径

  • ./是当前平级目录,通过这个引用可以找你的兄弟。
  • ../是向上一级目录,也就是当前路径的父级目录。通过这个引用可以找你的叔叔们。一个../只代表向上跳一级,要找爷爷级请加两个,也就是../../,以此类推

导入组件

  • 组件或者变量以及方法要想被其他文件引用必须导出 。也就是在声明前面加上export
  • 多个导出可以用

module.exports = 
    某组件名,
    某变量名,
    某方法名,

  • export default 用作导出修饰的使用时可以不需要引用,每个文件只能有一个默认导出的对象。
  • js里面万事万物皆是对象,是所有,是所有,是所有。不管是方法还是变量还是字符串还是组件。

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的智慧是无限滴)

有什么建议的可以留言喔

如果我的博客对您有帮助,请留言鼓励下或者点个赞吧!

以上是关于React-Native 知识点小结的主要内容,如果未能解决你的问题,请参考以下文章

【react-native】小结

react-native学习小结

React-Native近期采坑小结

银行基本业务知识

初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)

每个人都应该了解的金融小知识 -- 利率计算