按下按钮后打开一个 WebView 反应本机答案

【问题标题】：Open a WebView after a button pressed with reactNative按下按钮后打开一个 WebView 反应本机
【发布时间】：2017-10-28 17:31:29
【问题描述】：

我正在使用 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()}，但它给出了一个例外。我能做些什么？

【问题讨论】：

标签： react-native webview

【解决方案1】：

您没有在组件的 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',
 },
});

【讨论】：

【解决方案2】：

我认为你必须导入以下内容

import { WebView } from 'react-native-webview'

而不是

'react'

【讨论】：