时间戳

首页 > 解决方案 > react-native 的 Linking api 在 openURL() 之后没有在浏览器中打开 url

react-native - react-native 的 Linking api 在 openURL() 之后没有在浏览器中打开 url

问题描述

我做了一个按钮：

<-Button onPress={() => Linking.openURL(props.albumName.url)} /->

按下按钮后，应用程序不会被重定向到新的浏览器窗口。我在 AVD 和我的 Android 手机上检查了它。参数props.albumName.url == https://www.amazon.com/Evolve-Imagine-Dragons/dp/B07143J5MM/。其他属性（例如props.albumName.title，props.albumName.artist等）正在正确显示，因此语法没有问题，我还尝试注销props.albumName.url以确认它包含正确格式的给定 url

标签： react-nativeredirect

解决方案

我猜您在按钮标签中缺少 title 属性，这是必需的道具。

我尝试了相同的代码，效果很好。

这是我的代码

import React, { Component } from 'react';
import {
  View,
  Linking,
  Button
} from 'react-native';


export default class Button1 extends Component {
render() {
    return(
        <View>
           <Button
            title="click" 
            onPress={() => Linking.openURL(this.props.albumName)}/>
        </View>
    );
}
}

我在这里使用该组件

import React, { Component } from 'react';
import {
 StyleSheet,
 Text,
 View
} from 'react-native';

import Button1 from './Button';



export default class App extends Component {
render() {
 return (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>`enter code here`
    <Text style={styles.instructions}>
      To get started, edit App.js
    </Text>
    <Button1 albumName = 'https://www.amazon.com/Evolve-Imagine- 
  Dragons/dp/B07143J5MM/' />
  </View>
 );
 }
 }

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
},
 welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

推荐阅读