react-native - 在 react-native 中导航到 Web 视图

Question

我想从我的 react-native 应用程序导航到 Web 视图。当我单击一个按钮时，我想重定向到此 Web 视图。我怎样才能做到这一点？

标签： react-native

Answer 1

你可以使用这个：

import { Linking } from 'react-native' 
// ...
// ...
onPress = (url) => {
    Linking.openURL(url)
}

这将为用户打开一个浏览器。或者您可以使用 Modal 和 WebView 组件执行此操作：

import {Modal, WebView} from 'react-native'
// ...
// ...
onPress = () => {
    this.setState({ isVisible: true })
}
render(){
    return(
        <View style={{flex: 1}}>
            <TouchableOpacity onPress={() => this.onPress('https://google.com')}>
                <Text>Open</Text>
            </TouchableOpacity>

            <Modal visible={this.state.isVisible} transparent={false}>
                 <View style={{flex: 1}}>
                     <WebView source={{uri: this.state.url}} />
                 </View>
             </Modal>
        </View>
    )
}