我的博客

前言：本文部分参考了React Native中文网本文所需工具： 1.JDK 1.8版本 2.Android studio 2.3.3  3.C++运行环境 cygwin 4.Git for window 5.python 6.node.js2.软件安装 2.1  JDK1.8      2.1.1.安装JDK1.8，点此去下载；      2.

最近做RN开发，发现8081端口老是被暂用，问题如下：解决步骤如下：1.打开CMD窗口，根据端口号查找进程号 netstat-ano| findstr8081//列出进程极其占用的端口，且包含 8081发现8081端口被9628所暂用2.根据进程号寻找进程名称tasklist| findstr 9628发现该进程名称为

RN项目的开发使用WebStorm开发工具，点击此处去下载1.点击File->New  Project ->React App2.New Project 下有三个选项说明如下：  2.1 Location：项目的保存位置和项目名称，本实例的项目名称为RNDemo  2.2  Node Interpreter：node解释器，输入Node安装目录中的Node.ext  2

前篇介绍了通过WebStorm创建RN项目，这篇介绍通过WebStorm导入Github中的RN项目1.准备工作   1.1. 下载Git，并在Setting->Version control ->Git中关联       1.2. 关联Github账户2.导入Github中RN项目    2.1.在Github中搜索 React native demo，如下 

Flex布局如图是W3C Flexbox布局模型：flexbox由伸缩容器和伸缩项目组成；任何一个元素都可以指定flexbox布局，伸缩容器的子元素可以称为伸缩项目；伸缩项目使用伸缩布局模型来排版；在默认情况下，伸缩容器由两根轴组成：主轴(main axis)和交叉轴(cross asix)

一：RN项目简介配置完RN开发环境后，通过webstorm新建一个测试项目，进入项目跟目录如下图1.android:此目录下是RN生成的android对应项目目录，运行Android失败时可以检测buildToolsVersion，gradle等是否一致2.iOS：对应RN生成的项目目录(不太熟，省)3.node_modules：依赖库，可以删除，删除后可以通过nmp instal

在react 布局中如果填充的view过多时，view会不会自动折行呢？我们在view中添加了12个Text，只显示了5个，其他的view没有显示出来，说明view没有自动换行功能如何使view换行显示呢？我们用到flexwrap属性，在view的跟属性中设置flexwrap:"wrap"即可改变flexDirection的属性为columu时，也能显示出来

rn通过布局justifyContent来定义伸缩轴沿主轴的对其方式，取值为枚举类型，分别为：flex-start，flex-end，center，space-between，space-around1.flex-start对其方式2.flex-end对其方式3.center对其方式4.space-between对其方式5.space-aroun

前文介绍了RN沿伸缩轴的对其方式，这篇介绍RN沿交叉轴的对其方式RN沿交叉轴的对其方式分为4种，分别为：flex-start，flex-end，center，stretch下面演示效果：1.flex-start对其方式2.flex-end对其方式3.center对其方式4.stretch对其方式(貌似跟图一区别不大)

flex类似于Android中的weight，使伸缩项目尽可能充满右侧空间，如下图为默认：flex=2：flex=1的比例显示

我们如何通过RN实现如图所示的效果：一：图形分析1.1：图形分为3列，我们设置flexDirection为“”row”，每个View独占1/3，flex设置为11.2：2,3列先把图形均分为上下两部分，填充内容1.3：给2,3列设置边框二：代码实现按照一的分析，实现逻辑如下：2.1：把布局分为3部分2.2：分别填充内容2.3：添加边框

RN使用Text来显示文本信息，如果一行中显示不同风格的文字，要使用到嵌套

numberoflines属性用于对Text组件限制显示的文本行数1：未设置numberoflines属性，显示如下2：设置numberoflines属性，未显示的文字会以..的形式显示

Text组件的点击事件是onPress，长按事件是onLongPress下面是对应的代码实现1：onPress事件对应的效果2：onLongPress事件长按事件效果

RN通过onLayout属性获取当前组件的位置和属性信息

今天使用Webstorm创建新RN项目的时候出现了这样的错误！解决办法：网上百度了一圈，根据关键字如"errno -4048"等，然后操作了一遍问题依然存在，具体分析之后看到Webstorm先在Temp文件夹下创建临时文件时出现了权限不足的情况，所以修改Temp文件夹的权限为管理员权限，重启后，新建项目，没有出错！(注：仅供参考，具体问题具体分析)

前言开发RN的工具有很多，选择性也比较多，常见的有：WebStormSublime Text 3VS CodeNuclide其他本文以Webstorm为例讲解使用Webstorm开发React Native注：本文默认已配置好React Native开发环境，如：安装JDK,Android SDK,Python,Node,React- Native-cli等，若不熟悉，请先看前文的React Na...

前言前文React Native开发之——Webstorm快捷开发介绍了使用Webstorm快捷开发React Native，本文介绍Webstorm开发RN配置。Webstorm开发RN配置配置文件编码格式注：为避免莫名其妙的问题，本文所使用的编码格式统一设置为”UTF-8”，如图所示Setting->Editor->File Encodings有三处修改，统一改为”UTF-8”。设...

前言React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。本文主要讲述Flex布局，包含以下几个：flexDirectionfl...

前言Text组件是React中的一个基本组件，它与Android上的TextView组件相类似，就是用来显示文本的，这个控件除了基本的显示布局之外，可以嵌套使用，设置样式，添加事件处理功能。基本用法属性方法在这里我只是举出一些比较常用的属性方法，只是起到抛砖引玉的作用，如果要了解更多的知识可以查看官方网址。风格样式——Style标签Text组件可以使用View组件所有的Style，View组件的所...

前言React Native中用于输入文本的组件是TextInput，类似于Android中的EditText，TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性。本文主要讲述：autoCapitalize属性autoCorrect属性autoFocus属性keyboardType属性（设置软键盘类型）ret...

前言前片文章已经简单介绍了组件TextInput的基本用法，本文将继续介绍其他属性的用法，内容如下：maxLength属性multiline属性placeholder和placeholderTextColor属性secureTextEntry属性selectTextOnFocus和selectionColor属性TextInputmaxLength概念maxLength，用于限定输入TextInp...

前言前两节已经讲了TextInput的大部分属性，本文将继续介绍TextInput的属性，内容如下：editable、value和defaultValueonChange和onChangeText获取文本输入TextInpupteditable、value和defaultValue概念editable:用于说明TextInput是否可编辑value：TextInput的值defaultValue：...

前言在ReactNative中Image是用于显示图片的组件，和开发Android的时候ImageView控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。恰当的使用Image组件能更形象更直观的向用户传达信息。本文主要讲述以下内容：从本地装载图片从网络装载图片从App中装载图片从SD卡装载图片Image从本地装载图像概念从本地装载图像，使用关键字...

前言TouchableHighlight，包装要显示的视图，点击时可用于高亮显示，React Native 0.36版本以前用于替代Button，类似于Android中的Button，React Native 0.37开始出现Button按钮。本文主要讲述TouchableHighlight的使用及其几个属性的用法：underlayColoractiveOpacityonHideUnderlayo...

前言Button-按钮，平时开发中再熟悉不过的东西了，React Native 0.37之前并没有Button按钮，一直用TouchableOpacity 或 TouchableNativeFeedback替代，React Native 0.37开始加入Button组件，今天我们要学的就是Button组件。titlecolordisabledaccessibilityLabelonPressBut...

前言TouchableNativeFeedback，用于使视图正确响应触摸的包装器(仅android)。在android上，该组件使用本地状态drawable来显示触摸反馈。目前它只支持将单个视图实例作为子节点，因为它通过将该视图替换为另一个中的节点实例，并设置一些附加属性。TouchableNativeFeedback属性backgrounduseForeground实例练习export def...

前言TouchableOpacity用于使视图正确响应触摸的包装器。按下，封装视图的透明度降低，使其变暗。 这个组件比较简单，属性较少，简单说明如下：activeOpacityTouchableOpacity使用说明activeOpacity属性activeOpacity用于显示透明度，0-完全透明，1-完全不透明实例练习export default class App extends Compo...

前言Switch：开关控件，类似于Android中的开关控件Switch。它需要一个onValueChange更新的回调函数value为了使组件反映用户操作，如果value组件未更新，组件将继续呈现所提供的value支持任何用户操作的预期结果。它有以下属性：value:是否打开。默认为falsedisabled:是否禁用 默认falseonTintColor：打开时背景色thumbTintColo...

前言ProgressBarAndroid是React Native封装了Android平台的显示进度组件，用来在App中内容加载进度显示。本文主要熟悉以下属性：color：设置进度的颜色属性值indeterminate： 设置是否要显示一个默认的进度信息，该假设styleAttr的风格设置成Horizontal的时候该值必须设置成falseprogress： number 设置当前的载入进度值(该...

前言ListView是React Native中渲染大量数据的组件，ListView是日常开发最常用的控件之一，会话列表（微信），商品列表（淘宝），问题列表（汽车大师）等等各种列表均用到了ListView。这篇文章简单介绍下ListView的入门。ListView概念使用ListView必须熟悉以下几个属性dataSourcerenderRowrowHasChangeddataSource和ren...

前言Picker常用于显示时间、地址选择器，是常用的控件之一。在RN开发中，系统也为我们提供Picker控件，并且提供了IOS专用的PickerIOS组件。本文主要讲解Picker的使用，并介绍常用的Picker属性：PickerPicker属性介绍onValueChange某一项被选中时执行此回调。调用时带有如下参数：itemValue: 被选中项的value属性itemPosition: 被选...

前言StatusBar 是 React Native 用来设置并动态改变设备的状态栏显示特性。可以通过设置StatusBar的样式实现不同页面状态栏的显示。虽然 StatusBar 是跨平台组件，但其中有些属性是通用的，而有些则是 iOS 或 Android 独有的。所以我们开发时要做好适配。组件StatusBar属性介绍通用属性animated设置当状态栏的状态发生变化时，是否需要加入动画。动画...

前言ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。组件ScrollView属性本文介绍一些ScrollView常用属性horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上...

前言今天我们来讲解一下关于 ViewPager 的使用，它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件，作用是实现滚动翻页的，在RN中也是有这么一个组件的（ViewPagerAndroid），每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。ViewPagerAndroidVi...

前言在开发Android的时候，一般我们会有一些加载网页的需求，或者执行一些JavaScript，我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件，它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative WebView的使用。组件WebView属性和方法主要属性source：在 WebView 中载入一段...

前言本文主要是针对React Native开发中遇到的错误进行总结和纠正，实际开发中，经常会遇到这样或那样的问题，如果解决不了，下面的开发可能进行不了，善于纠错和总结也是学习的必备技能。本文会持续更新。错误npm ERR! Unexpected end of JSON input while parsing near ‘…native/download/react’现象解决办法npm cache ...

前言封装了平台DrawerLayout（仅限安卓平台）的React组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。(借鉴于...

前言这一组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。组件RefreshControl属性onRefresh function:在视图开始刷新时调用。refreshing bool:视图是否应该在刷新时显示指示器。colors(Android) [Col...