React Native和Taro的使用小技巧集锦

在使用React Native和Taro的过程中一些报错处理集锦

运行Android环境

需要输入adb reverse tcp:8081 tcp:8081，且要保证在同一局域网内。RN需要手动输入：npx react-native start运行

提示找不到adb命令：
需要安装adb命令，使用homebrew命令如下：

brew install --cask android-platform-tools

导航栏navigation的使用

navigation.navigate("Login",{id:xxxx})
navigation.push("Login",{id:xxxx})
props.navigation.replace("Login",{id:xxxx})
navigation.goBack()
navigation.goBack("Login")
navigation.pop()
navigation.pop(n) //n代表返回第几层页面
navigation.popToTop()

• 1.navigate 入栈新页面
• 2.push 入栈新页面
• 3.replace 替换当前页面（待支付到支付完成页面 后退不需要到待支付就可以用这个）
• 4.goBack 后退一页 关闭当前页
• 5.pop 默认返回到上一页
• 6.popToTop 返回至最顶层页面
• 7.navigate、push 、replace区别具体看下面

如上图，外部是一个栈容器，此时A页面在最底部，navigate到B页面，为什么此时用navigate没有用push呢，因为在栈内没有B页面时，用navigate和push是一样的，都是进行入栈操作，没有区别，出于习惯使用navigate。下一步，B页面push了一个B页面，此时为何不使用navigate呢，因为栈内若已经存在一个相同页面，navigate就会失去跳转页面的效果，B navigate B代码不会报错，但是也不会进行跳转，因为栈内已经有了B，只有使用push才会进行新的B页面进行入栈操作。现在了解了navigate与push的区别，看上图，进行了一系列入栈操作，形成最终的栈图，下面分三种情况讨论。
1.现在我们处于C页面，若C push A，同样会执行A的继续入栈，但此时若使用C navigate A，则A以上全部页面会执行出栈操作，相当于popToTop方法，回到A页面；
2.现在处于C页面，若C push B，同样会执行B的继续入栈，但此时若使用C navigate B，则会当前的C开始向下寻找B界面，直到找到最近的B界面，进行跳转，C与B中间的页面全部出栈，此时B还可以继续进行返回，一步步返回至A页面；
3.还有一种与图无关的情况，A navigate BrowserPage，此时app接收到一个推送，点击推送进入了新的BrowserPage，若收到推送后跳转页面的逻辑使用的是navigate方法，此时就会出现无法跳转的情况，因为BrowserPage已经在栈内存在（刚刚在浏览网页），所以此处要使用push方法进行入栈操作；
4.A页面navigate B页面，A收到通知要navigate到C界面，此时C入栈并覆盖了B，此时点击返回是回到B界面，因为C执行出栈操作后到了B，而不会直接回到A；
5.replace方法，
replace - replace the current route with a new one
　　据官方文档介绍，是用一个新的路由替换掉当前的路由，即使用新的页面替换当前的页面，假设有这样的场景，A navigate到B，B完成任务后要到C，C返回的不是B，而是A，此时使用B replace C即可实现需求。

React native路由跳转navigate、push、replace的区别
React Native 路由/导航篇(还有多少人在用RN…)

window.deltaUrlToBlobUrl is not a function

原因: brew upgrade后，watch版本更新了，需要重启电脑/杀死终端进程，watch重新扫描文件才可以

Unable to find a specification for ExpoModulesCore depended upon by EXApplication

npx install-expo-modules@latest

import of module ‘glog.glog.log_severity’ appears within namespace ‘google’

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false

“No matching function for call to ‘RCTAppSetupPrepareApp’” and “No matching function for call to ‘RCTAppSetupDefaultRootView’” errors when building project in Xcode

Taro

getStorage:fail data not found

由于获取数据时并没有在缓存中添加数据，所以报错，需要增加try...catch来捕获错误。

export async function getStorageValue(key) {
    try {
        const value = await Taro.getStorage({
            key: key,
            success: res => {
                console.log('success')
            },
            fail: res => {
                console.log('fail')
            }
        })
        return value.data
    } catch (error) {
        return ""
    }
}

getStorage:fail data not found

Taro和React Native的WebSocket使用问题

Taro的官方文档Taro.connectSocket(option)给出的示例在小程序上运行正常，在手机端App运行报错，提示内容{"code":1006,"reason":"abnormal closure"}，看资料说是需要重连，但是重连无效。

/// Taro可用
Taro.connectSocket({
    url: url,
    header: header,
    // protocols: [header],
    success: function () {
        console.log('WebSocket connect success')
    }
}).then(task => {
    task.onOpen(function () {
        console.log('WebSocket onOpen')
    })
    task.onMessage(function (msg) {
        console.log('WebSocket onMessage: ' + msg)
    })
    task.onError(function (e) {
        console.log('WebSocket onError' + JSON.stringify(e))
    })
    task.onClose(function (e) {
        console.log('WebSocket onClose: ' + JSON.stringify(e))
    })
})    

经服务器协助，发现在手机端请求时自定义header没有传过去，小程序的自定义header发送正常。查看node_module内的代码，Taro封装RN的WebSocket时没有把header获取到。
使用javascript自带的WebSocket满足手机端的使用，但该代码编译小程序使用时提示错误，错误暂且不表，准备封装一个类兼容这两部分代码。

websocket = new WebSocket(url, '', { headers: { "X-API-KEY": '' } });

websocket.onopen = function () {
    console.log("WebSocket onopen")

}
websocket.onerror = function () {
    console.log("WebSocket onerror")
};
websocket.onclose = function (e) {
    console.log("WebSocket onclose")
}
websocket.onmessage = function (event) {
    console.log("WebSocket onmessage")
}

个人技术博客——在React Native中使用WebSockets
websocket重连机制实现

React 更新数组

先创建新的数组，并更新内容

var index = 2
var dataTemp = {key: "value"}
const dataListTemp = dataList.map((data, i) => {
	if (index === i) {
		return dataTemp
	} else {
	return data
})

setDataList(dataListTemp)