ReactNative
zhaihaohao1
这个作者很懒,什么都没留下…
展开
-
ReactNative学习----21ReactNative中热更新
热更新步骤:1全局安装脚手架:(code-push 检测是否已安装)npm install -g code-push-cli2创建一个名称为 linkgap4 的项目 到 https://appcenter.ms/apps (可以使用github账号登录)下:code-push app add linkgap4 android react-native创建之后会返回一个key(正式签名的...原创 2019-04-21 17:59:23 · 262 阅读 · 0 评论 -
ReactNative学习----20ReactNative中调用原生模块
官方文档:https://reactnative.cn/docs/native-modules-android/RN调用原生的方法,步骤如下:1.用Android Studio打开一个已存在的项目,在RN项目中选择android/build.gradle文件打开。2.在Android原生的里面创建一个类MyNativeModule继承ReactContextBaseJavaModule,这...原创 2019-03-24 12:29:44 · 513 阅读 · 0 评论 -
ReactNative学习----19显示网页的组件WebView
官方文档:https://reactnative.cn/docs/webview.html#docsNav显示连接:import React, { Component } from 'react';import { WebView } from 'react-native';export default class MyWeb extends Component { rende...原创 2019-03-23 16:25:38 · 385 阅读 · 0 评论 -
ReactNative学习----18对话框组件Modal使用
官方文档:https://reactnative.cn/docs/modal.html#docsNav效果图:由于Alert https://blog.csdn.net/zhaihaohao1/article/details/88632787不能自己定义样式,所以使用Modal可以自己定义样式代码(复制即可运行):ModalExample.jsimport React, {Com...原创 2019-03-23 16:02:53 · 260 阅读 · 0 评论 -
ReactNative学习----17项目练习之图片墙
效果图:源码:PhoneWall3源码下载:原创 2019-03-18 09:38:53 · 228 阅读 · 0 评论 -
ReactNative学习----16项目练习之豆瓣视频
效果图:这里就不详解了源码下载:源码里面都是一步一步的写的,所以有很多项目原创 2019-03-18 09:27:10 · 237 阅读 · 0 评论 -
ReactNative学习----15对话框组件Alert使用
官方文档https://reactnative.cn/docs/alert.html#docsNav源码复制即可使用:AlertDemo1.jsimport React, {Component} from 'react';import {Platform, StyleSheet, Text, View,Alert} from 'react-native';/** * 对话框 * ...原创 2019-03-18 09:09:25 · 240 阅读 · 0 评论 -
ReactNative学习----14Flexbox布局的使用
文档地址:https://reactnative.cn/docs/flexbox/#docsNav效果图:代码:复制即可使用代码里面有详细的注释:import React, {Component} from 'react';import {Platform, StyleSheet, Text, View, Alert, Button} from 'react-native';/*...原创 2019-03-18 09:05:50 · 196 阅读 · 0 评论 -
ReactNative学习----13图片组件Image及ImageBackground的使用
官方文档:https://reactnative.cn/docs/imagebackground/https://reactnative.cn/docs/image/代码复制即可使用代码:ImageBackgroundDemo.jsimport React, {Component} from 'react';import {Platform, StyleSheet, Text, Vi...原创 2019-03-18 08:55:45 · 630 阅读 · 0 评论 -
ReactNative学习----12按钮组件TouchableHighlight使用
官方文档:https://reactnative.cn/docs/touchablehighlight/#docsNav代码复制即可使用代码:TouchableHighlightDemo.jsimport React, {Component} from 'react';import {Platform, StyleSheet, Text, View, Alert, Button,Tou...原创 2019-03-18 08:52:34 · 339 阅读 · 0 评论 -
ReactNative学习----11输入框组件TextInput使用
官方文档:https://reactnative.cn/docs/textinput.html#docsNav效果图:实现功能:拿到输入对话框的数据:代码:TextInputDemo.jsimport React, {Component} from 'react';import {Platform, StyleSheet, Text, View,Alert,TextInput,T...原创 2019-03-18 08:48:29 · 274 阅读 · 0 评论 -
ReactNative学习----10列表组件FlatList的使用
官方文档:https://reactnative.cn/docs/flatlist.html#docsNav效果图:项目结构:实现功能:1请求数据2渲染数据3实现下拉刷新4实现上拉加载代码:FlatListDemo.js中是请求数据,渲染数据Item.js是渲染条目的FlatListDemo.jsimport React, {Component} from 'reac...原创 2019-03-15 10:50:42 · 1250 阅读 · 0 评论 -
ReactNative学习----9Fetch之post请求数据,上传图片
github地址:https://github.com/react-native-community/react-native-image-picker效果图:使用步骤:1cd 到项目目录下yarn add react-native-image-pickerreact-native link react-native-image-picker2在android目录下在Android...原创 2019-03-15 10:29:54 · 707 阅读 · 0 评论 -
ReactNative学习----8react-native-image-picker调用相机相册
github地址:https://github.com/react-native-community/react-native-image-picker效果图:使用步骤:1cd 到项目目录下yarn add react-native-image-pickerreact-native link react-native-image-picker2在android目录下在Android...原创 2019-03-15 10:25:48 · 2744 阅读 · 0 评论 -
ReactNative学习----7Fetch之post请求数据
官方文档:https://reactnative.cn/docs/network/#使用-fetch例子,复制接口使用HttpPost.js/** * * * fetch 的post请求 * https://reactnative.cn/docs/network/#使用-fetch * */import React, {Component} from 'react';im...原创 2019-03-15 09:59:58 · 615 阅读 · 0 评论 -
ReactNative学习----6Fetch之get请求数据
官方文档:https://reactnative.cn/docs/network/#使用-fetch例子,复制即可使用HttpGet.js/** * fetch 的get请求 *https://reactnative.cn/docs/network/#使用-fetch */import React, {Component} from 'react';import {Platfo...原创 2019-03-15 09:57:50 · 436 阅读 · 0 评论 -
ReactNative学习----5AsyncStorage本地存储数据
官方文档:https://reactnative.cn/docs/asyncstorage/#docsNavAsyncStorage是一个简单的、异步的、持久化的 Key-Value 存储系统,它对于 App 来说是全局性的。可用来代替 LocalStorage。例子:复制即可运行AsyncStorageDemo.js/** * 本地数据存储 * AsyncStorage是一个简单...原创 2019-03-15 09:51:14 · 441 阅读 · 0 评论 -
ReactNative学习----4react-navigation实现页面跳转以及数据传递
官方文档:https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html项目结构:安装模块:cd 到项目目录下yarn add react-navigation@2.18.3源代码:ConFigIndex配置路由,One把数据传给Two,Two在回传给OneConFigIndex代码:import React f...原创 2019-03-15 09:36:44 · 609 阅读 · 0 评论 -
ReactNative学习----3react-navigation实现App的顶部菜单
官方文档:https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html效果图:项目结构:安装模块:cd 到项目目录下yarn add react-navigation@2.18.3源代码:TopIndex 配置路由,Tab1,Tab2,Tab3分别是一个页面TopIndex代码:import React ...原创 2019-03-15 09:30:24 · 718 阅读 · 0 评论 -
ReactNative学习----2react-navigation实现App的底部菜单
官方文档:https://reactnavigation.org/docs/zh-Hans/2.x/getting-started.html效果图:项目结构:安装模块:cd 到项目目录下yarn add react-navigation@2.18.3源代码:BottomIndex 配置路由,Home1,Home2,Home3分别是一个页面BottomIndex 代码:imp...原创 2019-03-15 09:21:49 · 376 阅读 · 0 评论 -
ReactNative学习----1环境搭建,程序调试,常见问题
搭建环境照着文档一步步搭建就好了https://reactnative.cn调试:调试1.手机调试====1首先在工具里面启动App(首次要安装apk)Terminal 中敲命令:npm start2在电脑上打开自己的共享的wifi在手机上找到IP地址 http://172.16.146.2猜出电脑的IP地址 http://172.16.146.13在电脑和手机浏览器分别访问h...原创 2019-03-15 08:52:10 · 215 阅读 · 0 评论