react-native开发总结

开发环境的搭建

下载jdk

• 下载地址: https://www.oracle.com/java/technologies/javase-downloads.html
• 

注意：推荐下载jdk1.8及以上的版本，下载之后配置环境变量

下载android studo

• 下载地址: https://developer.android.google.cn/studio/

android studo推荐使用3.5以上的版本，然后下载android sdk，选择8.1以上的版本

• 
• 

创建react-native项目

• 输入命令：npx react-native init myproject

---

分辨率的适配， Dimensions

• 详细代码如下：

import { Dimensions, View } from 'react-native'

// 适配方案
export const sumPx = {
  dpi: (w) => { // 自适应px, 750为设计稿的宽度
    return width / 750 * w
  },
  h: height,
  w: width
}

使用方法
<View style={{width: sumPx.dpi(300), height: sumPx.dpi(300), backgroundColor: 'red'}}></View>

• 详细代码请看:https://github.com/dj49846917/react-native-study/blob/master/docs/example/%E9%80%82%E9%85%8D/UnitConvert.js

代码调试

• 输入命令： adb shell input keyevent 82， 唤起调试菜单

• 唤起之后，选择debug，会弹出谷歌浏览器，然后console里面就能打印你代码中的console.log
  

• 取消debug只需要再次唤起菜单，点击stop
  

获取导航栏的高度

• 要先下载react-navigation

import { Header } from 'react-navigation';

const navHeight = Header.HEIGHT;
console.log(navHeight)

react-navigation重置路由(5.x版本)

1. 需求：app第一次进来先判断是否登录，如果没有登录，就跳转到登录页面，登录了就跳转到首页，但是返回的时候，登录和启动页都不要显示

2. 实现方法：
   ```
   使用CommonActions的reset方法重置路由

   import { useNavigation, CommonActions } from ‘@react-navigation/native’;

   navigation.dispatch(
   CommonActions.reset({
   index: 1,
   routes: [
   { name: ‘Login’ },
   ],
   })
   );

```