react-native学习
文章平均质量分 71
番薯大佬
码农一枚
展开
-
react-native开发见解
一、react-native方案的优势1、项目价值(1)加快互联网产品的开发迭代速度APP迭代周期变短、需求/交互评审不再需要与多端开发同时沟通、产品走查不再需要同时兼顾IOS和安卓端,避免多端开发理解不一致。(2)提高产品的开发和测试效率同一功能由一人负责,避免多人负责因沟通不及时,需求理解不同导致平台实现差异。多端业务代码相同,测试同学不再需要多端重复验证,仅需关注少量的平台兼容问题。(3)减...原创 2018-03-14 10:46:41 · 216 阅读 · 0 评论 -
react-native按钮组件Button
效果图代码示例import React, {Component} from 'react';import { StyleSheet, View, Button, Alert} from 'react-native';type Props = {};export default class ButtonPage extends Component<Pr...原创 2018-05-15 14:25:14 · 10037 阅读 · 2 评论 -
react-native样式定义使用StyleSheet
效果图代码示例import React, { Component } from 'react';import { Dimensions, StyleSheet, View, Text} from 'react-native';let widthScreen = Dimensions.get('window').width;let heightScreen ...原创 2018-05-15 15:07:37 · 5210 阅读 · 1 评论 -
react-native开发异常处理——LaunchAgents目录异常
刚开始学习react-native跨平台的开发学习,跟着react-native中文网(https://reactnative.cn)的教学一步一步安装配置好环境,也初始化创建了项目,在调用命令运行的时候,却让我傻眼了,模拟器爆红~~~。仔细查看终端的错误提示,错误提示如下:Watchman: watchman --no-pretty get-sockname returned with exi...原创 2018-05-08 17:35:30 · 1011 阅读 · 0 评论 -
react-native组件ScrollView
效果图代码示例import React, { Component } from 'react';import { Dimensions, StyleSheet, View, Text, Alert, TouchableOpacity, Image, Button, ScrollView} from 'react-nativ...原创 2018-05-22 15:38:38 · 3044 阅读 · 1 评论 -
react-native开发异常处理——react-native run-android命令报错
在终端使用命令react-native run-android报错,如下图所示:其中说到No connected devices!,我便猜测是不是需要先打开android模拟器,于是就先启动android模拟器,再接着执行命令react-native run-android果然运行成功。...原创 2018-05-16 10:39:37 · 3684 阅读 · 0 评论 -
react-native学习——SVN管理项目源码
使用svn管理跨平台开发源码时,有些文件可以设置成忽略文件无须上传。1、.watchmanconfig(路径:项目名称-.watchmanconfig)2、yarn.lock(路径:项目名称-yarn.lock)3、node_modules目录(路径:项目名称-node_modules)4、build目录(路径:项目名称-ios-build,或:项目名称-android-build)忽略设置见示例...原创 2018-06-12 15:02:19 · 1188 阅读 · 0 评论 -
react-native使用谷歌浏览器调试
通过 谷歌浏览器Chrome调试React Native程序步骤一:先在模拟器上运行项目步骤二:选中模拟器,同时使用键盘上的组合键"Command + D"打开Developer Menu菜单,并单击选择”Debug JS Remotely"步骤三:在打开的谷歌浏览器里选择开发者工具:菜单——视图——开发者——开发者工具步骤四:在模拟器里刷新项目"Command + R"则会看到调试效果注意:要停...原创 2018-06-21 11:30:34 · 14203 阅读 · 0 评论 -
react-native导航栏react-navigation
react-native使用react-navigation(https://reactnavigation.org/)进行导航功能开发。效果图使用安装react-navigation这个包,在终端使用如下命令(需要在项目项目中执行):方法1:yarn add react-navigation方法2:npm install --save react-navigation使用1、配置(1)在App....原创 2018-06-21 16:01:08 · 2710 阅读 · 1 评论 -
react-native弹窗Alert
效果图代码示例import React from 'react';import {View, Text, Button, Alert, AlertIOS} from "react-native";const title = "温馨提示";const message = '要下雨了,记得带伞'export default class AlertPage extends React.Com...原创 2018-06-21 18:38:48 · 6490 阅读 · 0 评论 -
react-native网络请求fetch
效果图代码示例import React from 'react';import {View,Text,Button} from 'react-native';export default class NetworkRequest extends React.Component { constructor(props) { super(props); this.state...原创 2018-06-21 20:23:46 · 743 阅读 · 0 评论 -
react-native数据缓存AsyncStorage
react-native中主要使用AsyncStorage进行数据缓存操作,其实现原理是key-value的形式。主要功能有:保存(修改)、删除(删除指定值,删除所有值)、读取。效果图代码示例import React from 'react';import {View, Text, TouchableOpacity, Alert, AsyncStorage, StyleSheet} from '...原创 2018-06-14 16:32:10 · 2951 阅读 · 2 评论 -
react-native文字组件Text
效果图代码示例import React, { Component } from 'react';import { StyleSheet, View, Text, Alert} from 'react-native';type Props = {};export default class TextPage extends Component<Prop...原创 2018-05-15 13:56:19 · 2943 阅读 · 0 评论 -
react-native图片组件Image
效果图代码示例import React, {Component} from 'react';import { StyleSheet, View, Image, Text} from 'react-native';const imgUrl = { uri:"https://f10.baidu.com/it/u=1934388360,3660384600...原创 2018-05-15 12:04:55 · 1685 阅读 · 0 评论 -
react-native分组列表SectionList
效果图代码示例import React, { Component } from 'react';import { StyleSheet, View, Text, SectionList} from 'react-native';type Props = {};export default class SectionListPage extends Comp...原创 2018-05-14 17:56:13 · 855 阅读 · 0 评论 -
react-native开发环境
RN(React-Native)-通俗的说就是跨平台开发吧,一套代码可以在安卓和ios上运行,针对ios而言其本质是对ios原生控件的一次封装,然后通过js调用相关函数,视图等。学习网站ES6 教程:http://es6.ruanyifeng.com/ReactJS 教程:http://huziketang.com/books/react/React Native中文网:https://react...原创 2018-03-14 11:02:41 · 249 阅读 · 0 评论 -
react-native常用操作指令
// 安装Homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"// 修改用户权限sudo chown -R `whoami` /usr/local// 安装Node.jsbrew install node// 设置npm镜像npm ...原创 2018-05-09 10:32:43 · 2548 阅读 · 0 评论 -
react-native开发常用宏义
// 获取设备屏幕宽export const widthDevice = Dimensions.get('window').width;// 获取设备屏幕高export const heightDevice = Dimensions.get('window').height;原创 2018-05-09 14:02:55 · 510 阅读 · 0 评论 -
react-native布局和样式设置
const styles = StyleSheet.create({ // 样式名称 nameStyle: { // 方向:默认纵向column,横向row flexDirection: column, // 分行:wrap,或nowrap flexWrap: wrap, // flex-start、flex-end、center、space-betwee...原创 2018-05-09 14:32:28 · 5137 阅读 · 0 评论 -
react-native开发异常处理——xrun:error:active developer path does not exit
调用命令react-native run-ios时报错,如下图所示:根据提示,xcrun运行命令的开发者路径不存在。估计应该是我重新安装了新版本的Xcode导致与原来设置的路径不一致,于是调用命令sudo xcode-select --switch Xcode.app实际路径 重新设置。设置成功后,再次调用命令react-native run-ios运行成功。...原创 2018-05-17 15:12:53 · 363 阅读 · 0 评论 -
react-native触摸组件TouchableOpacity
效果图代码示例import React, { Component } from 'react';import { StyleSheet, View, Text, TouchableOpacity, Alert} from 'react-native';type Props = {};export default class TouchableOpa...原创 2018-05-17 16:45:59 · 4949 阅读 · 1 评论 -
react-native触摸组件TouchableHighlight
效果图代码示例import React, { Component } from 'react';import { StyleSheet, View, Text, Alert, TouchableHighlight} from 'react-native';type Props = {};export default class TouchableH...原创 2018-05-17 17:04:59 · 1419 阅读 · 0 评论 -
react-native开发异常处理——PCH was compiled with module cache path
项目project改变目录,即从目录A移动到目录B后,再设备命令react-native run-ios运行时,报了一个错误。如图所示:造成调用命令运行项目怎么也运行不起来,但是通过Xcode工具却能正常运行。根据错误提示,我想应该是调用命令运行时,使用了移动项目前正常运行时的缓存目录,而项目移动后调用命令时仍然使用了缓存目录,所以造成找不到文件的情况。根据这种思路,果然在项目的ios目录下找到了...原创 2018-05-11 17:03:02 · 985 阅读 · 0 评论 -
react-nativere触摸组件TouchableNativeFeedback
效果图示例代码import React, { Component } from 'react';import { StyleSheet, View, Text, Alert, TouchableNativeFeedback} from 'react-native';import TouchableHighlightPage from "./Toucha...原创 2018-05-18 09:55:00 · 1069 阅读 · 0 评论 -
react-native开发工具Atom
Atom:https://atom.io/Atom插件:https://atom.io/packageshttps://nuclide.io/docs/quick-start/getting-started/其他插件:(1)浏览器浏览功能:open-in-broser(2)分页展示html页面效果:atom-html-preview(3)文件路径补全:autocomplete-path(4)文档化...原创 2018-06-20 12:38:54 · 627 阅读 · 0 评论