随笔分类 -  React Native

React Native 移动开发
摘要:1.npm install --save teaset 阅读全文
posted @ 2021-01-28 19:05 创客未来 阅读(246) 评论(0) 推荐(0) 编辑
摘要:最近做了一个RN项目,用到了地图插件,弄得一头雾水,经过多次百度和实验总结一下流程,分享给大家。 1.申请组测成为开发者 官方地址:https://lbs.amap.com/api/android-sdk/guide/create-project/get-key 这一步应该不用怎么说吧,大家自己都会 阅读全文
posted @ 2021-01-28 08:56 创客未来 阅读(1509) 评论(0) 推荐(0) 编辑
摘要:react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS。本文引用 https://www.npmjs.com/package/react-native-amap3d 功能 地图模式切换(常规、卫星、导航、夜间) 3D 建筑、路况、室内地图 内置地图控件的显示 阅读全文
posted @ 2021-01-17 17:47 创客未来 阅读(1157) 评论(0) 推荐(0) 编辑
摘要:npm install @babel/plugin-proposal-decorators 在package.json里面加一句话 "babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ] 阅读全文
posted @ 2021-01-15 19:58 创客未来 阅读(756) 评论(0) 推荐(0) 编辑
摘要:1.在空文件夹下输入CMD进入dos窗口 2.一次输入命令 npm install -g yarn react-native-cli react-native init 项目名称 cd 项目名称 react-native run-android 阅读全文
posted @ 2021-01-15 09:43 创客未来 阅读(215) 评论(0) 推荐(0) 编辑
摘要:react native 打包成Android 的apk安装包有两种方式,第一种方式是利用 Android studio 打包这里就不接介绍了。第二种是利用 react native 自身项目打包 1.生成签名 再一个空文件夹打开CMD,运行以下命令 keytool -genkey -v -keys 阅读全文
posted @ 2021-01-14 20:42 创客未来 阅读(1642) 评论(0) 推荐(0) 编辑
摘要:navigationOptions:配置StackNavigator的一些属性。 title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用 header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle:设置导航栏标题,推荐 阅读全文
posted @ 2021-01-12 18:04 创客未来 阅读(939) 评论(0) 推荐(0) 编辑
摘要:1.创建4个页面(CKHome.js、CKFind.js、CKNearby.js、CKMine.js),本文以CKHome一个页面为例 import React,{Component} from 'react' import { StyleSheet, View, Text, Button } fr 阅读全文
posted @ 2021-01-12 14:55 创客未来 阅读(501) 评论(0) 推荐(0) 编辑
摘要:1.安装 组件 yarn add react-navigation-tabs 2.创建自定义底部导航组件类 BaseNav.js 1 import React,{ Component} from 'react'; 2 import { 3 View, 4 Text, 5 Button 6 } fro 阅读全文
posted @ 2021-01-12 09:38 创客未来 阅读(925) 评论(0) 推荐(0) 编辑
摘要:1.安装集成 react navigation 1.项目初始化后,集成React Navigation在项目根目录运行命令: expo install react-navigation react-native-gesture-handler react-native-reanimated reac 阅读全文
posted @ 2021-01-11 12:53 创客未来 阅读(274) 评论(0) 推荐(0) 编辑
摘要:fetch是react-native内部组件,不需要安装 1.创建自定义CKNet.js fetch组件类 1 import React, { Component } from 'react'; 2 import { 3 View, 4 Text, 5 StyleSheet 6 } from 're 阅读全文
posted @ 2021-01-11 09:26 创客未来 阅读(313) 评论(0) 推荐(0) 编辑
摘要:项目中常常有到的 左侧图片右侧是多行文字的列表,利用 FlatList组件自定义组件。 1.创建自定义CKWineList.js组件 1 import React,{Component} from 'react'; 2 import { 3 Text, 4 StyleSheet, 5 FlatLis 阅读全文
posted @ 2021-01-11 08:37 创客未来 阅读(274) 评论(0) 推荐(0) 编辑
摘要:常规用法,单行渲染数据 1.自定义CKFlatList.js 组件类 1 import React,{Component} from 'react'; 2 import { 3 Text, 4 StyleSheet, 5 FlatList, 6 TouchableOpacity, 7 Dimensi 阅读全文
posted @ 2021-01-10 20:38 创客未来 阅读(1057) 评论(0) 推荐(0) 编辑
摘要:ScrollView的refreshControl属性用于下拉刷新,只能用于垂直视图,即horizontal不能为true。 1.创建自定义CKRefresh.js刷新组件 1 import React,{Component} from 'react'; 2 import { 3 View, 4 T 阅读全文
posted @ 2021-01-10 19:40 创客未来 阅读(1026) 评论(0) 推荐(0) 编辑
摘要:安装 Swiper ,在WebStorm的Terminal中运行命令 yarn add react-native-swiper@nighty 安装成功后在package.json中可以查看到 react-native-swiper的安装信息 "dependencies": { "react": "1 阅读全文
posted @ 2021-01-10 18:23 创客未来 阅读(318) 评论(0) 推荐(0) 编辑
摘要:ScrollView组件常用于轮播图或引导页,那么水平滚动则比较常用 自定义水平的CKScrollView.js组件类 1 import React,{Component} from 'react'; 2 import { 3 View, 4 Text, 5 StyleSheet, 6 Scroll 阅读全文
posted @ 2021-01-10 11:20 创客未来 阅读(2142) 评论(0) 推荐(0) 编辑
摘要:ScrollView(滚动视图)的组件。 记住 ScrollView 必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。要给 ScrollView 一个确定的高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都有确定 阅读全文
posted @ 2021-01-10 11:01 创客未来 阅读(751) 评论(0) 推荐(0) 编辑
摘要:1.自定义一个状态机组件 import React,{Component} from 'react'; import { View, StyleSheet, Button, TouchableOpacity, Text, Dimensions, Image } from 'react-native' 阅读全文
posted @ 2021-01-09 20:56 创客未来 阅读(182) 评论(0) 推荐(0) 编辑
摘要:1.创建自定义CKButton.js组件类 1 import React,{Component} from 'react'; 2 import { 3 View, 4 StyleSheet, 5 Button, 6 TouchableOpacity, 7 Text 8 } from 'react-n 阅读全文
posted @ 2021-01-09 18:26 创客未来 阅读(447) 评论(0) 推荐(0) 编辑
摘要:1.创建自定义CKTextInput.js 组件类 1 import React,{Component} from 'react'; 2 import { 3 View, 4 TextInput, 5 StyleSheet, 6 Text 7 } from 'react-native'; 8 9 e 阅读全文
posted @ 2021-01-09 17:50 创客未来 阅读(253) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示