探花交友 React Native 跨端APP项目实战开发

【2020前端全新项目】探花交友 React Native 跨端APP项目实战开发教程 ——【黑马程序员广州中心】

https://www.bilibili.com/video/BV1e5411L7VV/

P1 1-课程导读

老师上课所采用的开发环境如下：
1.系统版本 window 10
2.开发工具 vs code
3.React Native 版本 0.62.2
4.React 16.13.1
5.屏幕投影工具 scrpy

P2 2-探花交友课程介绍

在技术上，充分使用前端流行和成熟的技术React Native 来进行功能开发，后台数据服务采用前端工程师最熟悉的 NodeJS + KOA2+MySql 搭建

P3 3-探花交友项目演示

手机号151 验证码888888

P4 4-课程安排
P5 5-环境搭建
P6 6-初始化项目
P7 7-屏幕投影工具的使用
P8 8-基础知识介绍
P9 9-项目目录结构
P10 10-jsx

P11 11-flex布局

P12 12-继承-单位-屏幕宽高

在rn中样式 没有继承

单位
1 不用加px
2 不用加vw vh
3 可以加 百分比"50%"

P13 13-变换
P14 14-TouchableOpacity

P15 15-Image

vscode ctrl+i 输入路径 打开文件

让动态图片动 需要配置 gif

P16 16-ImageBackground
P17 17-InputText
P18 18-插值表达式
P19 19-組件
P20 20-props

P21 21-调试1 配置查看网络请求

P22 22-调试2
P23 23-事件
P24 24-生命周期

P25 25-mobx1

P26 26-mobx2
P27 01-框架搭建
P28 02-登录页面-背景图片

P29 03-登录页面-图片px转dp

设计稿的宽度/元素的宽度 = 手机屏幕/手机中元素的宽度
手机中元素的宽度 =手机屏幕*元素的宽度/设计稿的宽度



import {  Dimensions} from "react-native";

//  设计稿的宽度 / 元素的宽度 = 手机屏幕 / 手机中元素的宽度
// 手机中元素的宽度 = 手机屏幕 *  元素的宽度 / 设计稿的宽度 375

/**
 * 屏幕的宽度
 */
export const screenWidth=Dimensions.get("window").width;
/**
 * 屏幕的高度
 */
export const screenHeight=Dimensions.get("window").height;

/**
 * 将px转为dp
 * @param {Number} elePx 元素的宽度或者高度 单位 px
 */
export const pxToDp=(elePx)=>screenWidth * elePx / 375;

P30 04-登录页面-input和icon组件

接口失败 项目老 不继续学 跳学 快速完成

Teaset(Toast)

react-native-confirmation-code-field验证码框

yarn add react-native-svg react-native-svg-uri 使用svg

react-native-amap-geolocation基于高德地图封装

react-native-image-crop-picker图片拆剪

jmessage-react-plugin 极光通讯

接口文档 157.122.54.189:9089/swagger.html

源代码 https://gitee.com/itydlcode/tanhuajiaoyou