用reactNative按下按钮后打开WebView

Question

我正在开发一个包含React Native的移动应用程序。我想在按下按钮后打开WebView。这是我的代码，但它不工作。按下onPress方法不起作用。

import React, { Component } from 'react'; 
import { View, StyleSheet, Button, WebView } from 'react-native'; 
import { Constants } from 'expo'; 


export default class webView extends Component { 

    onNavigationStateChange = navState => { 
    if (navState.url.indexOf('https://www.google.com') === 0) { 
    const regex = /#access_token=(.+)/; 
    const accessToken = navState.url.match(regex)[1]; 
    console.log(accessToken); 
} 
}; 

renderContent() { 
return (
    <WebView 
    source={{ 
     uri: '', 
    }} 
    onNavigationStateChange={this.onNavigationStateChange} 
    startInLoadingState 
    scalesPageToFit 
    javaScriptEnabled 
    style={{ flex: 1 }} 
    /> 
); 
} 

render() { 
return (
    <View style={styles.container}> 
    <Button 
     style={styles.paragraph} 
     title="Login" 
     onPress={() => this.renderContent()} 
    /> 
    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
}, 
}); 

我试过onPress={this.renderContent()}这也是，但它给了一个例外。我能做什么 ？

Answer 1

您没有在Component的render（）方法中呈现WebView。只要将渲染看作您网页的DOM即可。您需要在渲染组件中为组件提供一个位置，您可以将其移除或添加，请参阅我从render方法中调用renderContent。因此，只要状态变量showWebView为真，它就会呈现WebView您应该这样做：

import React, { Component } from 'react'; 
import { View, StyleSheet, Button, WebView } from 'react-native'; 
import { Constants } from 'expo'; 


export default class webView extends Component { 

state={ 
    showWebView: false 
} 

onNavigationStateChange = navState => { 
    if (navState.url.indexOf('https://www.google.com') === 0) { 
    const regex = /#access_token=(.+)/; 
    const accessToken = navState.url.match(regex)[1]; 
    console.log(accessToken); 
} 
}; 

renderContent() { 
return (
    <WebView 
    source={{ 
     uri: '', 
    }} 
    onNavigationStateChange={this.onNavigationStateChange} 
    startInLoadingState 
    scalesPageToFit 
    javaScriptEnabled 
    style={{ flex: 1 }} 
    /> 
); 
} 

render() { 
return (
    <View style={styles.container}> 
    { this.state.showWebView && this.renderContent() } 
    <Button 
     style={styles.paragraph} 
     title="Login" 
     onPress={() => this.setState({showWebView: true})} 
    /> 
    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
}, 
});