ReactNative
xjl271314
最近正在博客项目的迁移工具,后期会迁移到github上
展开
-
React-Native 中如何让TextInput获得焦点?
问题:项目需求是这样的点击另外一个icon使得input获得焦点,并自动调起键盘。解决思路一: 原本项目集成了ant-mobile,想直接使用ant的InputItem,但是很不幸,在react-native中并不支持focus方法。 解决思路二: 采用原生的TextInput,这里直接上代码import React from 'react'import Pro...原创 2018-05-03 19:51:46 · 9970 阅读 · 0 评论 -
React-Native官方组件的效果探究以及一些优秀的组件推荐
本篇文章主要是对官方组件的一些效果的探讨,旨在深入理解官方组件的一些表现形式和使用方法以及在不同平台下的适配问题方便以后的工作中来选取合适的组件或者类库来完成UI视图的搭建。本篇文章使用的React-Native版本是0.55.3,文档版本是0.51。本篇文章只会罗列一些常用的组件,并不会全篇覆盖,关于详细的用法还请阅读官方文档英文文档中文文档暂时只上IOS端的表...原创 2018-06-07 17:43:25 · 1122 阅读 · 0 评论 -
React-Native中一些常见的问题
Android Studio编译错误transformClassesWithJarMergingForDebug原因:缓存或者内部原因。解决方法:清空缓存或者参考:[(https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx/issues/2)列表内容...原创 2018-05-21 14:16:44 · 2747 阅读 · 3 评论 -
React-Native种使用antd-mobile的Picker时出现的异常报错
场景: 在使用Picker组件时,修改用户的性别,后台的返回数据是这样的:data:{ code:1, gender:'男'}React-native界面是这样的:import React from 'react'import { View } from 'react-native'import { List, InputItem, Picker...原创 2018-05-07 19:53:10 · 3323 阅读 · 0 评论 -
React-Native中使用antd-mobile的InputItem时遇到输入中文显示的问题
场景:在React-Native项目中集成了antd-mobile在使用InputItem处理中文输入的时候,按照官方的解决方案是: import React from 'react' import { List, InputItem } from 'antd-mobile'; export default class SetScreen extends React...原创 2018-05-07 19:38:49 · 5765 阅读 · 2 评论 -
React-Native如何在App内打开外链页面
前言:在很多应用场景,比如说分享到微信好友,打开应用下载(更新)地址等,需要从App内部跳转到外部的链接。方案一:React-Native官方提供了一个**Linking**方法,用于和外部App链接进行交互。 static openURL(url: string) 尝试使用设备上已经安装的应用打开指定的url。 你还可以使用其他类型的URL,比如一个地理位...原创 2018-05-11 19:43:17 · 15288 阅读 · 7 评论 -
React-Native如何复制文本到剪贴板
React-Native自带Clipboard API,使用Clipboard可以在iOS和Android的剪贴板中读写内容。官方API里面只有复制到剪贴板和从剪贴板读取内容的两个方法: static getString() 获取剪贴板的文本内容,返回一个Promise语句。let str = Clipboard.getString(); static...原创 2018-05-11 19:01:44 · 10296 阅读 · 0 评论 -
react-native中使用ant-mobile的InputItem时如何点击其他地方收起键盘?
使用ant的InputItem时,发现点击屏幕上其他地方并不会让input失去焦点,所有需要手动收起键盘,解决方案是:import { InputItem } from 'antd-mobile';const dismissKeyboard = require('dismissKeyboard');//react-native自带... <TouchableWithoutFee...原创 2018-05-04 15:44:32 · 1997 阅读 · 0 评论 -
如何在react-native实现自定义的垂直方向跑马灯
项目需求是需要实现一个垂直方向的跑马灯轮播,早期采用react-native-swiper解决方案,此方案在ios端正常使用,在android端不能使用,所有果断放弃。第二方案打算使用ant-mobile的Carousel组件,import { Carousel, WingBlank } from 'antd-mobile';import { Text } from 'react-nat...原创 2018-05-04 11:16:17 · 2979 阅读 · 0 评论 -
React-Native图片加载问题
加载本地图片:加载本地图片,推荐使用require方式<Image source={ require('../assets/1.png') } />默认Image会去根据设备的分辨率自动匹配图片的大小,所以把1@2x.png 和1@3x.png同时放在assets目录下,而显示的时候不需要跟上@后面的文本,不然显示会报错。加载网络图片<Image source...原创 2018-05-03 20:06:00 · 1314 阅读 · 0 评论 -
React-Navigation学习笔记
如何跳转到一个新的页面?this.props.navigation.push(routerName)如何返回之前的页面?this.props.navigation.goBack()如何在页面之间传递参数?this.props.navigation.push('Discovery',{ id:1111, name:'哈哈哈'})如何在新页面...原创 2018-08-28 14:58:33 · 462 阅读 · 0 评论