![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React-Native
胡椒粉0121
这个作者很懒,什么都没留下…
展开
-
React Native 开发中类的使用
对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。创建一个Student的类并将其导出class Student { constructor(name, age, sex) { this.name = name ...原创 2019-07-13 15:53:28 · 316 阅读 · 0 评论 -
列表组件 VirtualizedList
列表组件VirtualizedList 介绍FlatList和SectionList的底层实现。FlatList 和 SectionList 使用起来更方便,同时也有相对更详细的文档。一般来说,仅当想获得比 FlatList 更高的灵活性(比如说在使用 immutable data 而不是 普通数组)的时候,你才应该考虑使用 VirtualizedList。Vritualization 通...原创 2019-09-18 16:57:02 · 1187 阅读 · 0 评论 -
React Native reateMaterialTopTabNavigator 详解
什么是createMaterialTopTabNavigatorcreateMaterialTopTabNavigator APIcreateMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):RouteConfigs(必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。 Ta...原创 2019-09-04 21:30:19 · 560 阅读 · 0 评论 -
React Native 项目调试
模拟器调试要使用快捷键请务必确保模拟器的 Hardware 菜单中,Keyboard 选项下的"Connect Hardware Keyboard"处于开启状态,否则按键是没有响应的。我们在模拟器上按快捷键command + D,即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。Android 模拟器对应的则是Command⌘+M(windows 上可能是 F1 或者 F2),...原创 2019-07-12 14:50:29 · 1363 阅读 · 0 评论 -
React Native组件的生命周期详解
组件的生命周期一个React Native组件从它被React Native框架加载,到最终被React Native框架卸载,会经历一个完整的生命周期。在这个生命周期中,我们可以定义一些生命周期函数,用来处理在特定条件下React Native组件将要执行的操作,比如在某个时间点读取数据等。在iOS中UIViewController提供了(void)viewWillA...原创 2019-07-11 14:46:11 · 769 阅读 · 0 评论 -
React Native 的props,state,refs使用详解
props的详情解释props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常由父层组件向子层组件传递)我个人理解,该属性的值是在父组件中引用子组件时候指定的,该属性是子组件中定义的,比如新建一个苹果组件,苹果有颜色的属性,在构建这个组件的时候,指定一个color属性,在父组件使用的时候再指定一个具体的颜色值,那么最后子组件就会拿到这个值,显示相应颜色的苹果.如何使用p...原创 2019-07-11 18:37:38 · 838 阅读 · 0 评论 -
React-Native 项目中变量与常量,方法,组件的导入和导出
变量的导入和导出在一个模块中定义变量和常量并且导出const name = '小明'var age = 22export {name, age} // 批量导出然后直接在需要的组件中导入,并且使用import React, { Component } from 'react';import { View, Text } from 'react-native';im...原创 2019-07-11 16:49:05 · 690 阅读 · 0 评论 -
React-Native 组件以及创建组件的两种方式
什么是React Native的组件React组件让你讲UI分割成独立的,可重用的一些碎片或者部分,这些部分都是相互独立的如下面截图,这个页面是有多个单独的组件组成的,不同的组件通过不同的关系组合到一起就形成了我们所看到的页面ES6创建组件的方式(最新,推荐)自定义一个组件叫HelloEs6Componentimport React, { Component }...原创 2019-07-11 13:52:05 · 531 阅读 · 0 评论 -
RN环境搭建和基本的使用
第三点:下载最新版本的Xcode,Xcode是开发IOS App必备的武器第四点:安装homebrew,用苹果电脑开发,homebrew是必备的利器第五点:安装wathcman(Facebook的一个开源项目,用来监视文件并且记录文件改动的情况)和flow(是一个JavaScript的静态类型检查器,用于找出JavaScript代码中的类型错误)第六点:其他的一些包也可以安装一下,gc...原创 2019-07-12 15:04:25 · 141 阅读 · 0 评论 -
React Native createStackNavigator 开发详解
createStackNavigator 介绍createStackNavigator提供APP屏幕之间切换的能力,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。屏幕转场风格默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同的,这也是React Native重平台性的一个体现,在Androi...原创 2019-07-13 18:24:56 · 5272 阅读 · 0 评论 -
react-navigation 组件详解
react-navigation 介绍随着react-navigation逐渐稳定,Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件,Navigator 自然胜任不了,这时React Native社区便孕育出了一个开源导航组件react-navigation。react-navigation的出现替代了Navigator、 Ex-N...原创 2019-07-13 18:04:28 · 638 阅读 · 0 评论 -
React Native 布局详细解释
React Native将Web中的flexbox布局引入进来使用,使得视图局部变得更加简单。关于Web里的flexbox,以及相关属性介绍,及样例图片可以参考CSS3 弹性盒子模型(flexbox)详解CSS3 - 弹性盒子模型(flexbox)详解1(基本概念介绍、浏览器支持情况)CSS3 - 弹性盒子模型(flexbox)详解2(伸缩容器的属性介绍、及样例)CSS3 -...原创 2019-07-13 17:02:51 · 171 阅读 · 0 评论 -
高性能列表组件FlatList
FlatList的由来在RN0.43版本中引入了FlatList,SectionList与VirtualizedList,其中VirtualizedList是FlatList与SectionList底层实现。FlatList的特性高性能的简单列表组件,支持下面这些常用的功能:完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部...原创 2019-09-18 17:01:22 · 290 阅读 · 0 评论