zoepriselife316的博客

有显示钱数的需求，要求为有小数显示保留两位小数，如果是整数直接显示为整数写一个js方法，直接传入该值，即可实现该需求// 判断是否为小数var priceFormat = function priceFormat(num) { if (!isNaN(num)) { return ((num + '').indexOf('.') !== -1) ? num.toFixed(2) : num; }}let yuan = '\xA5'.concat(priceFormat(price

使用react native 写一个倒计时，带有天数时分秒，时间结束后，让倒计时消失上代码/** * 倒计时 * ----------------------------------------------- */ import React, { Component } from 'react'; import { StyleSheet, TouchableWithoutFeedback, ImageBackground } from 'react-native' im

Invariant Violation: Changing numColumns on the fly is not supported. Change the key prop on FlatList when changing the number of columns to force a fresh render of the component.双行多列数据，数量变化时，会报错，修改方法：render(){ <ScrollView horizontal style={{ marg

this.state:开发中，组件肯定要与用户进行交互，React的一大创新就是将组件看成了一个状态机，一开始有一个初始状态，然后用户交互，导致状态变化，从而触发重新渲染页面1、当用户点击组件，导致状态变化，this.setSate方法就修改状态值，每次修改以后，会自动调用this.render方法，再次渲染组件2、可以把组件看成一个状态机，根据不同的status有不同的UI展示，只要使用se...

React Native 生命周期主要分为三个阶段：实例化阶段、存在阶段、销毁阶段常用的是实例化阶段：这个阶段负责组件的构建和展示的时间，需要我们根据几个函数的调用过程，控制好组件的展示和逻辑处理实例化阶段函数：getDefaultProps：是固定不变的常量在组件中，我们可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefa...

在本地下载好，并且改完了文件，正常运行的情况下，使用react-native-img-cache组件写了个小的demo，成品如图：CachedImage用于显示图片：import {CachedImage} from &quot;react-native-img-cache&quot;;&amp;lt;CachedImage source={{ uri: &quot;https://i.ytimg.com/vi/yaqe1...

官网：https://github.com/wcandillon/react-native-img-cache1、使用react-native-img-cache这个的前提需要react-native-fetch-blobnpm install --save react-native-fetch-blobreact-native link其他的方式参考react-native-fetch-...

TouchableOpacity 透明触摸本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。不透明度的变化是通过把子元素封装在一个Animated.View中来实现的，这个动画视图会被添加到视图层级中，少数情况下有可能会影响到布局。（译注：此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景。）使用之前，与Text，...

在项目中，有ios和Android的区别，不同的设备显示的内容也会有些差异，所以，布局时有时要改不同的样式才能显示一样的效果，所以可以把两个文件都映射到一个文件中只修改一个文件就可以达到这样的效果。先新建一个login.js.内容如下：/** * Sample React Native App * https://github.com/facebook/react-native * @fl...

Image一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等，使用方式如下：return ( &lt;View&gt; &lt;Image style={styles.icon} source={require('./icon.png')} /&gt; ...

React Native 获取屏幕的宽高及分辨率var Dimensions = require ('Dimensions') ; //首先引入,然后使用即可export default class Rule extends Component { constructor(props) { super(props); this.state = { ...

React Native的View组件和Flexbox的使用在看view组件之前，我们先了解下JSX语法，React核心机制之一是虚拟DOM，可以在内存中创建虚拟的DOM元素，通过对DOM的模拟，最大限度地减少与DOM的交互。例子：var btn=document.createElement("BUTTON"); btn.className = 'btn'; var t=document.c...

React Native的使用在这里使用的是ECMA2015(ES6)语法，如果不了解的小伙伴，阮一峰的ES6很不错，了解下http://es6.ruanyifeng.com/#README。在使用RN写项目时，打开index.android.js，首先要引入react中的component这个组件，然后引入react native中要使用的组件，下面要使用什么组件，在最上方就要把它引入进去，...

React-Native环境搭建搭建开发环境 欢迎使用 React Native！这篇文档会帮助你搭建基本的 React Native 开发环境（Windows）。一.安装JDK1.从Java官网下载JDK并安装 java -version 查看版本信息，检验是否安装成功 2.配置环境变量 在此电脑右击，选择属性，找高级系统设置，选...

React Navtie 中的TextInput组件TextInput是React Native中一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。import React, { Component } from ‘react’; imp...

React Native中的TextInput (补充)TextInput 的属性：import React, { Component } from 'react';import { AppRegistry, StyleSheet, Image, View,KeyboardAvoidingView, Text, TextInput ,Dimensions,StatusBar, Tou...