React Native
Amarao
这个作者很懒,什么都没留下…
展开
-
react native Unable to resolve module 'AccessibilityInfo'
这个问题是由于react-native 和 react-native-cli版本问题导致的按照React Native中文网搭建开发环境,得到的版本如下:react-native-cli: 2.0.1react-native: 0.56.0稳定版本react-native-cli: 1.2.0react-native: 0.55.4解决办法://全局执行安装以下三...原创 2018-07-23 17:36:44 · 1292 阅读 · 1 评论 -
React-Native:语法篇
目录1.简介2.变量声明2.1 var命令2.2 function命令2.3 let命令2.4 const命令2.5 import命令2.6 class命令3.解构赋值3.1下面是一些使用嵌套数组进行解构的例子。3.2解构赋值允许指定默认值。3.3解构赋值不仅适用于var命令,也适用于let和const命令。3.4对于Set结构,也可以使用数组的...转载 2018-08-08 10:13:22 · 4921 阅读 · 0 评论 -
RN入门基础12:react-navigation详细讲解
目录一、介绍二、代码及使用1、StackNavigator: 普通页面跳,可传递参数2、TabNavigator: 类似底部导航栏,用来在同一屏切换不同页面3、DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉的屏幕4、属性介绍一、介绍RN中文网推荐用react-navigation替代navigator作为新的导航库,从RN 0.43版本开始,...原创 2018-08-03 13:09:29 · 2782 阅读 · 0 评论 -
RN入门基础10:网络 fetch
一、介绍很多移动应用都需要从远程地址中获取数据或资源。可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容,这就需要网络了。1.使用FetchReact Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。如果之前使用过XMLHttpRequest(即俗称的ajax)或是其他的网络API,那...原创 2018-08-07 17:21:56 · 1074 阅读 · 0 评论 -
RN入门基础9:滚动视图 ListView
一、介绍ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。 ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。 ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源,render...原创 2018-08-07 16:34:42 · 504 阅读 · 0 评论 -
RN入门基础8:滚动视图 ScrollView
一、介绍ScrollView是一个通用的可滚动的容器,其中放入多个组件和视图,而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置)。 ScrollView适合用来显示数量不多的滚动元素。放置在ScollView中的所有组件都会被渲染,即使在屏幕外。ListView组件如适合用来显示较长的滚动列表二、举例...原创 2018-08-07 16:08:53 · 3284 阅读 · 0 评论 -
RN入门基础7:文本输入(TextInput)
一、介绍TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用。还有一个名为onSubmitEditing的属性,会在文本被提交后(用户按下软键盘上的提交键)调用。二、举例我们将用户输入的单词全部翻译为‘LL’1.首先导入组件Textinputimport React, { Co...原创 2018-08-07 15:58:42 · 4864 阅读 · 0 评论 -
RN入门基础6:使用Flexbox布局
一、介绍flexbox可以指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说,使用flexDirection、justifyContent和 alignItems三个样式属性就已经能满足大多数布局需求。注意:React Native中的Flexbox的工作原理和web上的CSS基本一致,当然也存在少许差异。首先是默认值不同:flexDirec...原创 2018-07-31 22:41:40 · 338 阅读 · 0 评论 -
RN入门基础5:指定/弹性宽高
目录 一、介绍二、代码举例一、介绍组件的高度和宽度决定了其在屏幕上显示的尺寸。组件的宽高分为两种,指定宽高和弹性宽高1.指定宽高是指在样式中指定固定的width和height。React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。这样在不同尺寸的屏幕上都显示成一样的大小。2.弹性(Flex)宽高flex可以使组件在可利用的空间...原创 2018-07-31 21:42:22 · 1457 阅读 · 0 评论 -
RN入门基础4:样式
一、介绍前面介绍RN时,已经提到了,RN的基本代码分为四部分,分别是组件导入区、核心代码区、组件样式区、注册启动组件。这里讲介绍组件样式区。在React Native中,仍然是使用JavaScript来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web上的CSS的命名,只是按照JS的语法要求使用了驼峰命名法,例如将background-color改为backg...原创 2018-07-31 19:41:17 · 421 阅读 · 0 评论 -
RN入门基础3:JSX动态布局之自定义属性state
一、介绍一个组件有两种属性控制:props(控制静态数据)和state(控制动态数据)。props用于需要静态数据(它在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变)。state用于需要改变的数据。一般来在constructor中初始化state,然后在需要修改时调用setState方法。二、举例假如我们需要制作一段不停闪烁的文字。分析:1.文字...原创 2018-07-30 22:45:11 · 995 阅读 · 0 评论 -
RN入门基础2:JSX静态布局之自定义属性props
一、prosp属性介绍组件在创建时可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。 比如Image组件,可以传入一个名为source的prop来指定要显示的图片,以及使用名为style的prop来控制其尺寸。二、代码举例1.基础组件Image使用props,传入一个名为source的prop来指定要显示的图片,使用名为style的prop来控制其尺寸。im...原创 2018-07-30 18:03:04 · 1274 阅读 · 0 评论 -
React Native 调试技巧
一、打开RN开发者菜单不管是真机还是模拟器,都需要首先输入命令,打开RN开发者菜单,命令如下adb shell input keyevent 82真机左右摇晃手机几下,也可以打开开发者菜单菜单如下图里面有很多选项,例如重新加载程序、Debug模式开启、实时更新、快速热修复,类似于instant run、开发者调试设置等等。但是开发者菜单只可在debug版本中调出,假如...原创 2018-08-03 22:45:39 · 988 阅读 · 0 评论 -
RN入门基础1:第一个RN项目-hello World
1.新建工程,用webStorm创建一个react native项目首先打开package.json,因为webstorm会创建rn项目时会下载最新的react-native,所以运行程序到模拟器上,经常会出现各种红屏,所以,将package.json的内容替换如下(里面是稳定版本的react-native和react-native cli){ "name": "mypr...原创 2018-07-24 18:23:04 · 9255 阅读 · 0 评论 -
React/React Native ES5 ES6 写法区别
一、介绍很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表,希望大家以后读到ES5的代码,也能通过对照,在ES6下实现相同的...转载 2018-08-08 10:28:28 · 415 阅读 · 0 评论