Dan*_*iel 5 android ios react-native
我在几个月前实现了一些代码，该代码修复了用户在我的应用程序上阅读文章并希望单击该文章中的超链接的能力，一旦这样做，用户将被带到外部浏览器。这是实现：
<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 });
};
函数onNavigationStateChange内部的属性是如何AutoHeightWebView触发的_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 中，我只是得到一个空白屏幕。
您可以根据平台有条件地渲染组件。
{ ...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);
}
}
}}
/>
}
| 归档时间： |
|
| 查看次数： |
148 次 |
| 最近记录： |