React Native
_RTFSC_
是什么?为什么?怎么做?
展开
-
React-Native通过登录界面学习TextInput组件
同时适配Android和IOS代码注释比较详细/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import { AppRegistry, StyleSheet, Text,原创 2016-08-28 11:02:36 · 8247 阅读 · 0 评论 -
ReactNative-定时器
官网不建议用自带定时器强烈建议使用TimerMixin中提供的this.setTimeout()方法。ES5中写法参考react-timer-mixin中的README.md文件简单演示下ES6中使用方式/** * Created by gaocai on 16/9/5. */import React, {Component} from 'react';import { AppReg原创 2016-09-05 22:34:58 · 4229 阅读 · 0 评论 -
ReactNative-网络请求
ReactNative网络请求这部分很简单但也很重要只要知道web页面网络请求,这边也完全适应。这里通过代码家API结合ListView的使用来简单试用下fetch的get请求。get请求先看效果图 使用基本步骤:下面会贴出完整代码 1.在构造方法中初始化 /** * 初始化数据 */ constructor(props) { super(pro原创 2016-09-06 10:13:11 · 5124 阅读 · 3 评论 -
ReactNative-DrawerLayoutAndroid
效果图: 组件比较简单且仅限Android使用只需要注意几个属性使用就可以了!!!drawerWidth 导航宽度 drawerPosition 从左侧出还是从右侧出如:drawerPosition={DrawerLayoutAndroid.positions.Left} renderNavigationView 导航视图keyboardDismissMode enum(‘none’, “原创 2016-09-06 12:24:06 · 1368 阅读 · 0 评论 -
ReactNative-结合定时器使用ActivityIndicator
ActivityIndicators组件作用是显示一个加载的状态并且可以跨平台使用这里结合定时器使用下 主要属性::**animating** 是否显示指示器 默认是true**color** 指示器颜色**size** 指示器大小 small,large/** * Created by gaocai on 16/9/7. */import React, {Compo原创 2016-09-07 07:10:13 · 1601 阅读 · 0 评论 -
ReactNative-Modal(模态窗口)类似Android中PopupWindow弹窗
ReactNative中的Modal组件Android IOS都可使用主要属性visible 设置是否显示animationType设置显示是的动画 slide 从下往上滑动出现 fade 慢慢显示 none 没有动画 默认transparent 设置是否透明默认是不透明onRequestClose 关闭时调用此方法onShow原创 2016-09-07 10:27:28 · 7636 阅读 · 3 评论 -
ReactNative-Picker组件
写过Android的都应知道Spinner下来选择器,Picker就是ReactNative界的Spinner只要属性和方法:onValueChange 这个方法在方法在选择Picker某一项时调用 可传两个参数 选择的value和positionselectedValue 这个属性是选择的值enabled 设置是否可点击 Android属性mode 设置样式 Android属性 dro原创 2016-09-07 11:31:49 · 9840 阅读 · 2 评论 -
ReactNative-Switch开关组件
Switch组件为跨平台组件Android IOS都可用 主要属性和方法:disabled 属性 布尔值默认是false 设置是否可交互onValueChange 方法 当值改变时调用 value 属性 设置开关状态默认是false关闭onTintColor IOS属性 设置开启状态时的背景颜色thumbTintColor IOS属性 设置圆形按钮背景颜色tintColor IOS属原创 2016-09-07 21:10:33 · 6775 阅读 · 2 评论 -
ReactNative-WebView组件
一般WebView有两种加载方式 一种是通过URL加载网页,第二种是通过本地静态页面加载下图演示加载网页和代码段automaticallyAdjustContentInsets bool 设置是否自动调整内容contentInset {top:number,left:number,bottom:number,right:number} 设置内容所占的尺寸大小injectJavaScri原创 2016-09-07 22:01:16 · 2128 阅读 · 0 评论 -
ReactNative-触摸事件
在ReactNative好像只有在Text组件中支持触摸事件其默认是不支持触摸事件的ReactNative给我们提供几个API以供组件支持触摸:TouchableOpacity,TouchableHighlight,TouchableNativeFeedback,TouchableWithoutFeedback, 这里使用方法一样只是反馈效果有点差别,这里只演示TouchableOpacity.经原创 2016-09-02 07:48:15 · 2915 阅读 · 0 评论 -
ReactNative-Image组件
加载静态图片资源:新建文件夹将图片放到文件夹中通过require()引用 <Image source={require('./img/ic_launcher.png')}/> 注意这里只能一个静态字符串,不可拼接使用加载打包到APP中的图片资源如Android(drawable文件夹) <Image source={{uri: 'ic_launcher.png'}}style={{ widt原创 2016-09-01 22:58:12 · 354 阅读 · 0 评论 -
React Native-FlexBox布局
class FlexBoxDemo extends Component { render() { return( Text1 Text2 Text3 {/*flex属相相当于Android中的权重就是所在父控件的比例比如Text4占父控件的七分之三 alignSelf原创 2016-08-07 11:18:08 · 319 阅读 · 0 评论 -
获取屏幕尺寸
//引用包var Dimensions = require('Dimensions');class DimensionsDemo extends Component { render() { return( {/*通过一个key*/} 当前屏幕宽度:{Dimensions.get('window').width} 当前原创 2016-08-07 11:46:04 · 1718 阅读 · 0 评论 -
React-Native真机调试(Android,Windows)
首先将项目通过AndroidStudio打开,运行到手机上,因为通过webstorm运行老是报错其次通过设置打开安装应用设置将悬浮窗打开如下图:然后轻轻摇晃手机弹出菜单选择Dev Settings之后点击Debug server host & prot for device配置自己路由器ip地址和端口号如下图:最后重新打开应用即可看效果原创 2016-08-29 11:49:48 · 4181 阅读 · 0 评论 -
ReactNative常见错误
1.could not connect to development server解决办法:WebStorm命令行下输入 npm start回车即可2.React Native: No propType for native prop RCTView.maxHeight 解决办法:看看你是不是已经运行了一个低版本的DEMO终端监控,将其关闭重新运行高版本DEMO即可原创 2016-08-08 09:21:50 · 246 阅读 · 0 评论 -
React-Native ListView简单使用
/** * Created by Administrator on 2016/8/30. */import React, {Component} from 'react';import { AppRegistry, StyleSheet, Text, View, ListView,} from 'react-native';class ListVie原创 2016-08-30 18:24:19 · 1885 阅读 · 1 评论 -
ReactNative(API)Alert
Alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等。。。ReactNative中的Alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在Android按钮至多有三个 下面是使用情况:/** * Created by Administrator on 2016/9/12. */import React, {Componen原创 2016-09-12 09:54:16 · 2579 阅读 · 0 评论 -
ReactNative(API)AsyncStorage存储
AsyncStorage存储类似Android中的sharedpreference存储或者IOS中的NSDefaultUser不过ReactNative中的AsyncStorage只能存储字符串类型常用方法:getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果原创 2016-09-12 16:00:41 · 842 阅读 · 0 评论 -
ReactNative-Navigator组件简单使用
主要属性configureScene function 方法,该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用,进行返回一个页面参数配置对象:(route, routeStack) => Navigator.SceneConfigs.FloatFromRightinitialRoute object 参数对象 进行设置导航初始化的路由页面。路由是标识导航器渲染标原创 2016-09-01 07:54:16 · 1363 阅读 · 0 评论 -
ReactNative-JS调用原生方法
第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModulepackage com.mixture;import android.content.Context;import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.fa原创 2016-09-22 11:16:13 · 1861 阅读 · 0 评论