WdBly Blog

懂事、有趣、保持理智

WdBly Blog

懂事、有趣、保持理智

周维 | Jim

603927378@qq.com

React Native 开发实践

从环境搭建,项目实战,到总结的文章

环境搭建

参考官网的搭建方法:react native 环境搭建
报错:undefined is not a function (evaluating ‘react DevTools.connect DevTools’) G:\RN\JimTe
解决:这是由于react-devtools-core版本问题导致的,搜索项目中的yarn.lock文件,将react-devtools-core的版本从3.4.2修改为3.4.3,然后yarn install.

调试

react-native run-android //第一次运行

adb shell input keyevent 82 //打开开发者菜单

adb reverse tcp:8081 tcp:8081 //设置chrome调试端口

在开发者菜单中打开热更新,enable live reload 和 enable hot reloading

打开js remotely,同时chrome访问http://localhost:8081/debugger-ui/即可

//日志访问
react-native log-ios
react-native log-android

开启Stetho调试

1:dependencies中新增:

dependencies { //注意在新版中 废弃了complie这个Api 使用implementation和 api代替 implementation ... ... debugApi 'com.facebook.stetho:stetho:1.5.0' debugApi 'com.facebook.stetho:stetho-okhttp3:1.5.0' }

2:在android/app/src/main/java/com/{yourAppName}/MainApplication.java文件中添加:

//首先导入Stetho的东西 import com.facebook.react.modules.network.ReactCookieJarContainer; import com.facebook.stetho.Stetho; import okhttp3.OkHttpClient; import com.facebook.react.modules.network.OkHttpClientProvider; import com.facebook.stetho.okhttp3.StethoInterceptor; import java.util.concurrent.TimeUnit; //然后先看是否有 onCreate这个函数,如果有,在里面加入代码 @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); //这下方是加入的Stetho的代码 Stetho.initializeWithDefaults(this); OkHttpClient client = new OkHttpClient.Builder() .connectTimeout(0, TimeUnit.MILLISECONDS) .readTimeout(0, TimeUnit.MILLISECONDS) .writeTimeout(0, TimeUnit.MILLISECONDS) .cookieJar(new ReactCookieJarContainer()) .addNetworkInterceptor(new StethoInterceptor()) .build(); OkHttpClientProvider.replaceOkHttpClient(client); }

3:运行react-native run-android

4:打开chrome 访问chrome://inspect

vscode调试

安装react-native-tool工具在vscode中调试项目(推荐)

  • 安装React Native Tools
  • image.png
  • image.png
  • 按F1,输入React Native可以看到一系列命令,先把项目跑起来,Start Packager 或者 Run Android On Devices
  • 按F1,选择Show Dev Menu,在设备中开启调试,这里需要注意,如果已经打开chrome调试页面(localhost:8081/debugger-ui)的,需要先关闭。
  • 点击开始调试image.png
  • 也可以断点调试image.png
  • 若是开启了热更新,则在文件改动后直接ctrl+s即可在下方看到console的输出,比起chrome调试来说方便一点。

react native debugger 推荐

结合 console, network, 元素检查等功能
项目地址

###开发环境

console.log

有个小技巧可以在发布时屏蔽掉所有的console.*调用。React Native 中有一个全局变量__DEV__用于指示当前运行环境是否是开发环境。我们可以据此在正式环境中替换掉系统原先的 console 实现。

if (!__DEV__) { global.console = { info: () => {}, log: () => {}, warn: () => {}, debug: () => {}, error: () => {} }; }

注意点

//查看网络请求
image.png

//https
image.png

//没有浏览器的限制 运行跨域
image.png

//提供websocket 支持
image.png

//ios中设置的http图片地址可能不会显示
image.png

//图片处理
image.png

//视频处理
需要注意的是视频必须指定尺寸而不能使用flex样式,因为我们目前还不能从非图片资源中获取到尺寸信息。对于直接链接到 Xcode 或者 Android 资源文件夹的视频,则不会有这个限制。

开发

iOS:你现在可以在 XCode 中打开刚刚创建的工程(SampleAppMovies/iOS/SampleAppMovies.xcodeproj),然后只要按下⌘+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的 Node 服务(React Packager)。所以每当你修改代码,你只需要在模拟器中按下⌘+R,而无需重新在 XCode 中编译。

想开发 Android 版本,先连接你的设备或启动模拟器,然后在SampleAppMovies目录下运行react-native run-android,就会构建工程(注意在第一次构建中会联网下载很多依赖,耗时较长。在国内的话务必使用稳定的 XX 工具,否则会一直失败)并自动安装到你的模拟器或者设备,同时启动用于实现动态代码加载的 Node 服务。当你修改代码之后,你需要打开摇一摇菜单(摇一下设备,或者按下设备的 Menu 键,或者在模拟器上按下 F2 或 Page Up,Genymotion 按下 ⌘+M),然后在菜单中点击“Reload JS”。

在生产环境中 开发者工具不能使用。

image.png

Cannot read property ‘DocumentDir’ of undefined, 解决方案

Cannot read property ‘DocumentDir’ of undefined

Style property ‘backgroundColor’ is not supported by native animated module

动画中启用了原生驱动后不能设置backgroundColor或者color的值,若要设置,则需要关闭原生驱动

{ useNativeDriver: true } // <-- 删除这一行

组件的poops需要使用interface Props 验证类型

项目

外部依赖,工具引入

  1. yarn add react-native-elements ui库
  2. yarn add react-native-router-flux 路由库
  3. yarm add mobx mobx-react 状态管理库
  4. 使用typescript 在react-native中使用typescript
  5. TSlint使用,使用TypeScript TSLint Plugin

js工程

  1. 新建app文件夹用于存放js工程文件,业务处理文件

开发环境刷新保持状态

const App = () => <AppNavigator persistenceKey={"NavigationState"} />; 

ESlint 配置全局变量

.eslintrc.js:

"globals": { "__DEV__": true }

image.png

WebView加载时会有一小段时间白屏

解决 backgroundColor: "rgba(0,0,0,0)"

使用逻辑运算符时报错,Text strings must be rendered within a component.

解决: 对条件添加 !!逻辑运算
!!this.productDetailStore.has_tag && <View />

Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

解决: 查看组件在setState()前是否有 await等操作如:

if (await userAuth.isLogin()) {
    this.rootStore.setCurType("USD");
}
await global.Storage.set("CurType", "USD");
this.setState({price})

打包

Android

  1. 用android studio打开项目中的android文件夹
  2. sync项目,处理报错,警告等信息
  3. build项目
  4. generate项目,注意选择或创建证书
  5. 选择debug或者release包
  6. 市场,运营上传各大应用市场

注意管理密钥,密钥的丢失意味着无法更新app,可以选择Google Play 的 App Signing