react-native - 使用 react Native 按下按钮后打开 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()}这也是，但它给出了一个异常(exception)。我能做什么 ？

Answer 1

你没有渲染你的 WebView在组件的 render() 方法中。只需将渲染视为网页的 DOM。您需要在渲染组件中为组件提供一个位置，然后才能删除或添加它，请参阅我正在调用 renderContent来自 render方法。所以每当状态变量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',
 },
});