React Native：Android端的onPress以某种方式触发onNavigationStateChange
Posted
技术标签:
【中文标题】React Native：Android端的onPress以某种方式触发onNavigationStateChange【英文标题】：React Native: onPress in Android side somehow triggers onNavigationStateChange 【发布时间】：2019-12-20 14:30:07 【问题描述】：我在几个月前实现了一些代码，该代码修复了正在阅读我的应用程序上的文章并想要单击该文章中的超链接的用户的能力，一旦这样做，用户就会被带到外部浏览器。这是实现：
<View style=styles.content>
Boolean(this.props.article.VideoID) && (
<VimeoVideo videoId=this.props.article.VideoID.toString() />
)
Boolean(this.props.article.Summary) && (
<Text style=styles.boldParragraph>
this.props.article.Summary
</Text>
)
this.props.article.Sections.map(s => (
<WebViewAutoHeight
key=s.Body.substr(10)
source=
//prettier-ignore
html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: $lightTheme.grey2 !important; color: $v2Colors.charcoalDarkest; font-size: $moderateScale(14, 0.2)px;">$s.Body</body>`
// onNavigationStateChange=event =>
// if (event.url !== uri)
// Linking.openURL(event.url);
//
//
/>
))
</View>
注释掉的部分。
它适用于 ios
但在 android 上，只要用户点击阅读更多，他们就会在手机中打开另一个浏览器
不确定连接
因为onPress=mainActionButtonPress是用户按下的
并且mainActionButtonPress 连接到一个函数：
_goto = article =>
this.props.setSelectedArticle(article);
this.props.navigation.navigate("ArticleDetails", isRead: true );
;
AutoHeightWebView 内的onNavigationStateChange 属性如何被_goto 函数触发？所以我进一步研究了这一点，我最好的猜测是，当_goto 触发this.props.navigation.navigate("ArticleDetails", isRead: true ); 时，javascript 会执行其中的所有内容，包括onNavigationStateChange，即使它应该只在event.url !== uri 时执行。
我能够通过以下方式找到解决方案：
onShouldStartLoadWithRequest=request =>
if (Platform.OS === "android")
const url = request.url;
console.log(request);
if (url !== uri)
Linking.openURL(url);
// return false;
但这会以某种方式取消 iOS 解决方案。所以这是行不通的：
<WebViewAutoHeight
key=s.Body.substr(10)
source=
//prettier-ignore
html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: $lightTheme.grey2 !important; color: $v2Colors.charcoalDarkest; font-size: $moderateScale(14, 0.2)px;">$s.Body</body>`
// onShouldStartLoadWithRequest=request =>
// if (Platform.OS === "android")
// const url = request.url;
// console.log(request);
// if (url !== uri)
// Linking.openURL(url);
//
// // return false;
//
//
onNavigationStateChange=event =>
if (Platform.OS === "ios")
if (event.url !== uri)
Linking.openURL(event.url);
/>
我尝试了一个三元运算符，但我发现语法错误到处都是。我的目标是让这些在各自的平台上运行。
我试图看看我是否可以在两个平台上都使用onShouldStartLoadWithRequest，但iOS似乎无法识别这个属性，因为当我测试它时，iOS上的文章根本没有出现在我刚刚的WebView中得到一个空白屏幕。
【问题讨论】：
【参考方案1】：您可以根据平台有条件地渲染组件。
...Platform.OS === 'android'
? <WebViewAutoHeight
key=s.Body.substr(10)
source=
//prettier-ignore
html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: $lightTheme.grey2 !important; color: $v2Colors.charcoalDarkest; font-size: $moderateScale(14, 0.2)px;">$s.Body</body>`
onShouldStartLoadWithRequest=request =>
const url = request.url;
console.log(request);
if (url !== uri)
Linking.openURL(url);
// return false
/>
: <WebViewAutoHeight
key=s.Body.substr(10)
source=
//prettier-ignore
html: `<body style="font-family: -apple-system, Roboto, sans-serif; background-color: $lightTheme.grey2 !important; color: $v2Colors.charcoalDarkest; font-size: $moderateScale(14, 0.2)px;">$s.Body</body>`
onNavigationStateChange=event =>
if (Platform.OS === "ios")
if (event.url !== uri)
Linking.openURL(event.url);
/>
【讨论】：
以上是关于React Native：Android端的onPress以某种方式触发onNavigationStateChange的主要内容，如果未能解决你的问题，请参考以下文章
安卓转战React-Native之windows下android环境搭建爬坑血泪史
Android上的React Native Fetch返回网络请求失败
安卓转战React-Native之windows下android环境搭建爬坑血泪史
安卓转战React-Native之windows下android环境搭建爬坑血泪史