React-Native
文章平均质量分 89
___Alive___
努力的学,然后骄傲的活着。
展开
-
React-Native之(小白计划二)StackNavigator结合TabNavigator
1:目录结构2:App.js页import {AppStackNavigator} from "./navigations/AppNavigators";export default AppStackNavigator;3:AppStackNavigators(路由页)import React from 'react';import { StackNavigator, Tab...原创 2018-06-03 11:32:17 · 901 阅读 · 0 评论 -
React-Native之引导页跳转到主页
1:目录2:App.js页import {AppStackNavigator} from "./navigations/AppNavigators";export default AppStackNavigator;3:AppTabNavigators.js(导航页)import React from 'react';import { createStackNavigator, ...原创 2018-06-17 14:06:34 · 5085 阅读 · 2 评论 -
ES6之Class
Class 的静态属性和实例属性静态属性指的是 Class 本身的属性,即Class.propName,而不是定义在实例对象(this)上的属性。class Foo {}Foo.prop = 1;Foo.prop // 1上面的写法为Foo类定义了一个静态属性prop。目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。// 以下两种写法都无效c...原创 2018-06-17 15:33:11 · 210 阅读 · 0 评论 -
React-Native之react-native-scrollable-tab-view(一)
组件地址:https://github.com/skv-headless/react-native-scrollable-tab-view1:属性及方法介绍1, renderTabBar(Function:ReactComponent)TabBar的样式,系统提供了两种默认的,分别是DefaultTabBar和ScrollableTabBar。当然,我们也可以自定义一个,我们会在下篇文章重点讲解如...原创 2018-06-17 18:58:04 · 1867 阅读 · 0 评论 -
React-Native之react-native-scrollable-tab-view(二)
前提:安装react-native-scrollable-tab-view和react-native-vector-icons和react-native-swiper地址:https://github.com/oblador/react-native-vector-icons(图标) https://github.com/skv-headless/react-native-scr...原创 2018-06-17 22:46:01 · 1064 阅读 · 0 评论 -
React-Native之AsyncStorage和react-native-easy-toast
1:常用方法getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法。如果发生错误,会把Error对象传入callback方法。该方法最终返回一个Promise对象setItem(key:string,value...原创 2018-06-18 12:11:57 · 784 阅读 · 0 评论 -
React-Native之CFBundleIdentifier错误
1:错误如图2:解决方式删除ios目录下的build目录,然后react-native run-ios原创 2018-07-24 08:54:26 · 888 阅读 · 1 评论 -
React-Native之YGNodeList.c normal x86_64错误
1:错误截图2:解决方式2.1:删除ModuleCache文件尝试运行一下,react-native run-ios,如若不行,先执行2.1后执行2.22.2:尝试清理build用Xcode打开项目,点击 Clean Build Folder,然后重新用webStorm运行项目...原创 2018-07-24 09:32:22 · 684 阅读 · 0 评论 -
React-Native之webStorm调用Xcode
1:第一次用webstorm调用Xcode或许会报如下的错误原因:没有设置路径2:解决方式:设置路径终端执行sudo xcode-select -switch (后面的路径是自己的Xcode路径)/Applications/Xcode.app/Contents/Developer命令,然后再输入一次系统的密码,完成。 ...原创 2018-07-25 17:59:45 · 366 阅读 · 0 评论 -
React-Native之Xcode路径错误
1:具体错误2:原因:没有设置Xcode的路径 3:解决方式:在命令行中输入sudo xcode-select -switch /Applications/Xcode.app 注意:-switch后面是自己的Xcode路径...原创 2018-07-26 17:12:42 · 419 阅读 · 0 评论 -
React-Native之react-native-simple-toast的SHORT错误
1:错误截图 2:解决方式react-native unlink react-native-simple-toast react-native link react-native-simple-toast react-native run-ios原创 2018-07-26 19:42:15 · 800 阅读 · 0 评论 -
React-Native之Xcode虚拟机的动画很慢
1:原因 可能是无意间开启了Xcode虚拟机的动画,关闭就ok了, 可以打开Xcode虚拟机,然后使用快捷键关闭command+T2:解决方式:打开Xcode虚拟机关闭动画...原创 2018-07-26 19:55:52 · 2229 阅读 · 0 评论 -
React-Native之(小白计划一)StackNavigator简单的跳转
目录结构:1:定义路由页AppNavigatorsimport {StackNavigator} from 'react-navigation';import HomePage from '../pages/HomePage';import Page1 from '../pages/Page1';import Page2 from '../pages/Page2';export...原创 2018-06-01 21:16:51 · 530 阅读 · 2 评论 -
React-Native之错误: 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain
错误信息:D:\project\React\React Native\FirstApp>react-native run-androidScanning folders for symlinks in D:\project\React\React Native\FirstApp\node_modules (21ms)Starting JS server...Building and inst...原创 2018-06-01 17:28:38 · 4700 阅读 · 0 评论 -
React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主 要包括三个组件:StackNavigator 导航组件TabNavigator 切换组件DrawerNavigator 抽屉组件StackNavigator 用于实现各个页面之间的跳转, TabNavigator 用来实现同一个页...转载 2018-06-03 11:35:38 · 1581 阅读 · 1 评论 -
React-Native之(小白计划三)StackNavigator+TabNavigator+DrawerNavigator
目录:1:App.js页import {AppStackNavigator} from "./navigations/AppNavigators";export default AppStackNavigator;2:AppNavigatros页(路由页)import React from 'react';import { createStackNavigator, crea...原创 2018-06-03 16:09:46 · 1937 阅读 · 3 评论 -
React-Native之(小白计划四)Flexbox简单布局
图:第一个栗子图:代码:import React, { Component } from 'react';import { Platform, StyleSheet, Text, Image, View, FlatList, TouchableOpacity} from 'react-native';export default ...原创 2018-06-03 17:00:15 · 254 阅读 · 0 评论 -
React-Native之(小白计划五)FlatList的Demo
代码(单页):import React, { Component } from 'react';import { StyleSheet, Text, View, FlatList, RefreshControl, ActivityIndicator,} from 'react-native';type Props = {};const ...原创 2018-06-04 21:38:08 · 2609 阅读 · 1 评论 -
React-Native之(小白计划六)SwipeableFlatList(滑动的列表)
代码:import React, { Component } from 'react';import { StyleSheet, Text, View, TouchableHighlight, SwipeableFlatList,//侧滑列表} from 'react-native';const CITY_NAMES = ['北京', '上海',...原创 2018-06-05 13:54:30 · 3594 阅读 · 2 评论 -
React-Native之(小白计划七)SectionList带分类的列表
代码:import React, { Component } from 'react';import { StyleSheet, Text, View, SectionList,//分类列表} from 'react-native';const CITY_NAMES = [ {title:'一线',data:['北京','上海','广州','深圳...原创 2018-06-06 11:56:23 · 909 阅读 · 2 评论 -
React-Native之(小白计划八)Fetch以及封装
封装前代码:import React, { Component } from 'react';import { StyleSheet, Text, View, Button,} from 'react-native';export default class FlatListDemo extends Component<Props> { ...原创 2018-06-07 12:20:59 · 2012 阅读 · 1 评论 -
React-Native之生命周期
概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化;第二阶段:是组件在...转载 2018-06-08 16:48:20 · 1404 阅读 · 0 评论 -
React-Native之swiper(轮播组件)
使用说明: 1. 先安装React-native-swiper npm i react-native-swiper –save 2. 导入Swiper import Swiper from ‘react-native-swiper’;代码:import React, {Component} from 'react'import { Styl...原创 2018-06-08 19:09:52 · 2459 阅读 · 0 评论 -
React-Native之500错误
错误图:解决方案:在当前项目的路径下分别运行以下命令:npm uninstall babel-preset-react-native如果是yarn 则运行这个yarn remove babel-preset-react-native最后重新运行...原创 2018-06-08 19:47:13 · 3536 阅读 · 1 评论 -
React-Native之Xcode虚拟机快捷键刷新和弹出菜单不能用
1:描述 有时候运行在Xcode虚拟机上的react-native项目 command+T和command+D没有效果2:原因其实这个问题主要是由于iOS Simulator和键盘之间断开了连接导致的,也就是说iOS Simulator不在接受键盘的事件了3:解决方式打开Xcode虚拟机开启连接 ...原创 2018-07-26 20:05:08 · 1161 阅读 · 0 评论