效果图: 代码: import React, {Component} from 'react' import {StyleSheet, View, Text, TouchableOpacity, TextInput} from 'react-native' class TextInputView extends Component { constructor(popps) { super(popps); this.state = { text: '' } } hide(val) { this.s

今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloWorld的一个示例介绍了RN的环境搭建.组件封装.Props以及States.经过这么多天,今天我们继续来看RN的东西,本篇博客是关于RN的Flex布局的,也就是说是关于RN中控件放哪儿的一篇博客.在RN中使用的是Flex布局,如果你之前接触过Web前端的话对FlexBox布局并不陌生,但是如果你之前没做过W

终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在几乎"竣工"的过程中,这一路的"艰辛"估计也只有自己能体会到了吧.其实自己并不喜欢抱怨,也不喜欢把负能量带给身边的朋友,因此在遇到问题后,都是竭尽全力的攻克它,也许会"废寝忘食",也许是"徒劳无功",即使中间道路实在太曲折,但庆幸

上篇博客我们聊了RN中关于Timing的动画,详情请参见于<ReactNative之结合具体示例来看RN中的的Timing动画>本篇博客我们将从一个“拉皮条”的一个动画说起,然后来看一下RN中Spring动画的使用方式以及具体效果.Spring从名字中不难看出是弹性弹簧的意思,也就是我们可以使用Spring这个动画来实现一些弹性的动画效果.本部分我们先通过一个“拉皮条”的示例来简单的看一下Spring动画的使用方式,然后在看一下Spring动画中可配置的属性以及每个属性的作用. 一.从“拉皮条

今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画部分,博客中的内容依然是依托于具体的示例来进行的. 下方是官网对RN动画的的一个综述,意思就是说在RN的组件中View.Text.Image 和ScrollView是支持动画的,不过你可以使用Animated.createAnimatedComponent()这个方法来创建一个支持动画的组件稍后会介绍到.这些

1.RN中的常用组件-----图片 本地图片: <Image  source={require('../src/assets/x.jpg')}/> 本地图片可以无需指定尺寸(因为导入/打包在服务器端进行),默认是原始尺寸;如果指定了width,height不会自动的修改, 也必须手工赋值. 远程图片:<Image  source={ {uri:'http://t.cn/logo.png'} }  style={{width:x,height:x }}/> 注意:Image的sour

在RN学习中,按照一本书中案例书写TextInput框, 书中给了两种写法 写法1: <TextInput style={styles.pswInputStyle} placeholder='请输入密码' password={true} onChangeText={(newText) => this.updatePws(newText)} /> 写法2: <TextInput style={styles.pswInputStyle} placeholder='请输入密码' pass

在原生的开发中,如果要自定义一些控件,可能会用到touch的相关方法,而React Native也有一套touch机制,说白了就是用JS写了一套方法打通android和ios平台,这里简单讲解下React Native(RN)的touch机制,这里先不过多深入研究,先熟悉下流程,至于RN的touch分发机制之后再详细讲解. PanResponder:可以将多点触摸操作协调成一个手势.它使得一个单点触摸可以接受更多的触摸操作,也可以用于识别简单的多点触摸手势. 下面来看下如何创建: compone

使用的SQL大概是这样的: select * from A left join B on A.id=B.id and A.id>10; --错误的使用 我们期望的结果集应该是 A中的id>10,但是实际上A.id>10 这个限制条件并没有起作用. 应该改成如下的这种形式: select * from A left join B on A.id=B.id where A.id>10;--正确的使用 这是在oracle的官方文档中找到的相关说明: left outer joinThe

在日常的开发中,时常需要去获取应用的一权限 比如查看通讯录/打开摄像机等 1:ios  iOS 的权限管理在info.plist里设置 info.plist主要是管理了app 的一些信息文件,比如版本啊 权限等 这里主要是设置了应用的http的访问权限 2:android 安卓的权限在RN中有PermissionsAndroid 这个API ,权限主要是设置在androidmainfest.mxl 文件中进行注册, 这个API主要是分为2步,第一步是检测是否权限已经有了,如果没有就申请权限 Pe

1. ListView dataSource 介绍: ListView需要指定数据的来源.传入数据必须是数组,或者是字典里面嵌套数组 系统会根据你传入的数据自动生成section和row 每一个字典的key会被ListView拆分成一个section(小节,这里的section和原生的一样),如果你不指定sectionId,则key就是sectionId 如何使用. 在构造函数中指定ListView的取值策略,先new一个dataSource对象 constructor(props) { sup

目录 1. github上相关资料 2.需要满足defultValue和value属性 react-native 0.55.4版本,发现TextInput 在iOS平台上无法输入中文的问题. 1. github上相关资料 import React, {Component} from 'react'; import {Platform, TextInput} from 'react-native'; class MyTextInput extends Component { shouldCompo

关于inline-block元素间隙的处理 参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html 如下,两个inline-block之间,会产生默认的间隙.原因是因为元素被当成行内元素排版的时候,元素之间的空白符(空格.回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙.这些元素之间的间距会随着字体的大小

react-native中,开发androidTV输入框的焦点处理. 复述流程: 安卓TV上,无法通过上下左右键,以及遥控器的上下左右来获取输入框焦点. 原因: 脸书的锅,但没修,这里官方的说法,TextInput在Android TV设备上不起作用.本机ReactEditText实现存在一个问题,使它无法获得关注.这样就无法导航到TextInput. 解决方法:使用touchable来转发焦点. 如: 1 import { TextInput, TouchableHighlight } fro

我们在做移动端项目和手机APP应用时,避免不了要获取用户手机的网络状况.在使用RN技术开发APP时,其内置的NetInfo API就是为了解决这一问题的.下面简单的讲下NetInfo如何使用. 最新的API与以往的有些不同,具体如下: - `fetch`方法过时了,用`getConnection`替代 - `change`事件过时了,用`connectionchange`替代. - `fetch`/`change`过时了,用`getConnection`/`connectionchange`替代

比如: 组件A想要给组件B中的组件C传递一个属性prop class A extends Component{ render(){ return( <B title = "这是一个标题"/> ) } } class B extends Component{ render(){ return( <C title = {this.props.title}/> ) } } class C extends Component{ render(){ return( <

找到所有的模块 一般来说,只要在模块中声明 RCT_EXPORT_MODULE 即可.这是个宏,展开后是声明了一个函数,定义了两个函数,如下所示. #define RCT_EXPORT_MODULE(js_name) \ RCT_EXTERN void RCTRegisterModule(Class); \ + (NSString *)moduleName { return @#js_name; } \ + (void)load { RCTRegisterModule(self); } @#的意

 如果不指定,每一个模块,都会生成自己的一个串行队列. 可以通过强行声明一个队列来指定所有方法都在这个队列执行 - (dispatch_queue_t)methodQueue { return dispatch_get_main_queue(); } methodQueue方法会在模块被初始化的时候被执行一次,然后会被React Native的桥接机制保存下来,所以你不需要自己保存队列的引用,除非你希望在模块的其它地方使用它.但是,如果你希望在若干个模块中共享同一个队列,则需要自己保存并返回相

刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方一直督促h5改动,出于对RN的好奇,和对自己技术的自信,改就改吧,postmessage,这东西也很好,但RN很坑,注入js会有问题,有延迟,h5发送postmessage也有问题,得延迟发送,具体时间还判断不出来,虽然有issue说根据window下的postmessage进行判断,但也是没啥效果

今天写ListView的每个Item的布局的时候发现,当文字太长时被截掉了不能完全显示,检查了很久发现没有设置固定高度都是可伸缩的为什么没有伸缩呢.看了很久才发现每个item是等高的,于是仔细检查才看到自己给每个item的最外层的那个View组件加了flex:1. 所以对于整个ListView来说每个item是等比的1,造成高度一样,内容被截掉,由于马虎导致特此记录一下.

使用以下代码获取navigation static navigationOptions = ({ navigation, navigationOptions }) => { const { params } = navigation.state; return { tabBarVisible: true, title:'档案', headerRight:( <View style={{marginRight:30/1536*width}}> <TouchableOpacity on