RN知识梳理
文章平均质量分 65
xiashiqi_blog
这个作者很懒,什么都没留下…
展开
-
RN样式及flex布局
RN样式及flex布局1、RN样式2、FlexBox布局1、RN样式React-Native 的样式是使用RN提供的 StyleSheet API的create函数来定义一个styles对象实现的1.1 样式声明:import {StyleSheet} from 'react-native';const styles = StyleSheet.create({ contain...原创 2018-10-23 10:05:33 · 5651 阅读 · 0 评论 -
RN 标签导航TabNavigator
RN 标签导航TabNavigator一、导航栏分类二、TabNavigator的应用一、导航栏分类StackNavigator: 类似于普通的Navigator,实现不同的页面进行跳转TabNavigator: 屏幕上方或下方的标签栏,不同的tabs互相切换。DrawerNavigator: 抽屉效果,侧边滑出二、TabNavigator的应用这里根组件是定义一个栈导航,在栈导航中...原创 2019-03-07 18:55:48 · 1102 阅读 · 0 评论 -
RN FlatList组件
长列表或者无限下拉列表是最常见的应用场景之一。RN 提供的 ListView 组件,在长列表这种数据量大的场景下,性能堪忧。而在最新的 0.43 版本中,提供了 FlatList 组件,或许就是你需要的高性能长列表解决方案。它足以应对大多数的长列表场景。一、属性说明 <FlatList data={showData} renderItem={th...原创 2019-03-06 20:40:59 · 2281 阅读 · 0 评论 -
RN 抽屉导航DrawerNavigator
RN 抽屉导航DrawerNavigator一、DrawerNavigator接口二、抽屉导航页面三、 打开抽屉式导航四、遇到的问题一、DrawerNavigator接口DrawerNavigator(RouteConfigs,DrawerNavigatorConfig)其中RouteConfigs部分和StackNavigator的完全一样。DrawerNavigatorConfig的各个...原创 2019-03-08 18:02:52 · 919 阅读 · 0 评论 -
RN ScrollView组件
ScrollView组件允许用户左、右或者上、下滑动来查看原来显示在屏幕外的内容一、ScrollView组件常用属性1.horizontal:布尔类型属性,当他为true时,ScrollView的所有子组件将会水平排列,false为垂直排列2.showsHorizontalScrollIndicator:布尔类型属性,当他为true时,水平方向会展示一个滑动指示器3.showsVertic...原创 2019-03-05 17:15:03 · 1736 阅读 · 0 评论 -
Text组件样式问题
1、Text内部的元素不再使用flexbox布局,而是采用文本布局。textAlign属性:首字母为英文时,默认从左向右排列。 此时可以调整为center2、Text居中显示的问题在开发中,开发者时常需要将一串字符串显示在比字符串高度高很多的空间中,此时通常就需要水平与垂直方向都居中显示。` &lt;TouchableHighlight activeOpacity={1} onPress=...原创 2019-03-01 18:58:00 · 538 阅读 · 0 评论 -
RN 栈式导航StackNavigator
引入import {StackNavigator} from 'react-navigation';配置栈式导航路由:StackNavigator(RouteConfigs,StackNavigatorConfig)import IntelligentPage from "../src/intelligent_guide/Page/IntelligentPage/IntelligentPa...原创 2019-02-18 18:34:18 · 1672 阅读 · 0 评论 -
RN之KeyboardAvoidingView、UIManager、findNodeHandle的使用
一、KeyboardAvoidingView我们在开发的时候,经常会遇到手机上弹出的键盘常常会挡住当前的视图,所以这个 KeyboardAvoidingView 组件的功能就是解决这个常见问题的,它可以自动根据手机上键盘的位置,调整自身的position或底部的padding,以避免被遮挡。1.常用属性:1)behavior 该参数的可选值为:height, position, paddin...原创 2018-12-07 14:17:24 · 3478 阅读 · 0 评论 -
React Native入门之动画Animated详解
ReReact Native入门之动画Animated详解转载 2018-12-06 15:09:09 · 235 阅读 · 0 评论 -
React Native区分安卓/iOS平台
import { Platform,} from 'react-native';alert(JSON.stringify(Platform));android手机弹出:{“OS”:“android”,“Version”:25,“is Testing”:false} 我是android7.1的如果是苹果OS则为iOS所以可以用以下判断方式 if(Platform.OS==='...转载 2018-11-23 17:31:25 · 1139 阅读 · 0 评论 -
React Native Keyboard API
一、Keyboard API当我们点击输入框时,手机的软键盘会自动弹出,以便用户进行输入。React Native 框架提供的Keyboard API可以实现对键盘事件进行监听,能够检测到键盘的弹出与收回,从而对布局做出相应的调整,并可以通过代码关闭虚拟键盘。1. addListener(eventName, callback)这个函数用来加载一个指定事件的事件监听器,该函数返回一个对象。...原创 2018-11-05 12:40:47 · 527 阅读 · 0 评论 -
RN 基本组件之Image与ImageBackground
1、Image组件React Native可以从给定的网址、给定的本地文件或者项目的资源文件中加载图片1.1 加载静态图片资源&amp;lt;View style={styles.container} &amp;lt;Image style={styles.icon} source={require('./image/redico.png')}/&amp;gt;...原创 2018-11-01 16:57:48 · 4211 阅读 · 0 评论 -
ReactNative自定义组件
开发中我们知道,ReactNative提供的组件并不能完全满足开发的需求,此时就需要自定义一些通用组件,那么如何导出全局的自定义组件呢?一、自定义组件的导出二、自定义组件的封装三、发布到npm1、npm官网注册账号 https://www.npmjs.com/signup2、进入GitHub下载的代码文件夹内,执行npm init接下来就是需要一系列的信息填写了name:填写...原创 2019-03-11 14:32:51 · 323 阅读 · 0 评论