如何将值从响应本机状态传递到WebView [英] How to pass value from react native state to webview

问题描述

我在react native项目中使用react-native webview包.

I am using a react-native webview package in my react native project.

我确实想将参数从本机反应传递给url，以显示在webview内

I do want to pass the params from react native to the url to show inside the webview

我的反应本机代码.

在这里，我有权从登录页面检索用户电子邮件.我想将电子邮件ID传递到URL或页面.

Here,i have the access to retrieve the user email from the login page. I want to pass the email id to the url or to the page.

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { Dimensions, TouchableOpacity } from 'react-native';

class NewScreen extends Component {
  //const email = this.props.route.params.email;
  constructor(props){
    super(props);
    this.state={
      isShow:true,
      email:''
    }
    this.ref = React.createRef();
    const email = this.props.route.params.email;
    this.windowWidth = Dimensions.get('window').width;
    this.windowHeight = Dimensions.get('window').height;  
  }
  componentDidMount(){
    //console.log('Mounted')
    //console.log('state',this.props.email)
    console.log('mail',this.props.route.params.email)
    
  }
  render() {
    return (
      <WebView
        source={{
          uri: 'https://xxx/add-new-submit-form.php?email=[e-mail]'
        }}
        
      />
    );
  }
}

export default NewScreen;

我的预期结果.

const email_id = this.props.route.params.email ->它包含用户的电子邮件ID.

const email_id = this.props.route.params.email -> It holds the email id of the user.

现在我需要将email_id的值传递给php网址

Now I need to pass the value of email_id to the php url

php网址 uri = https://xxx/add-new-submit-form.php?email=[e-mail]'

我想在uri中传递用户电子邮件ID的值.

I want to pass the value of the user email id in the uri.

推荐答案

有多种方法可以做到这一点.简单地，这应该起作用:

There are multiple ways to do it. Simply this should work:

componentDidMount() {
  //...rest of the code
  const email_id = this.props.route.params.email;
  setState({ url: `https://xxx/add-new-submit-form.php?email=${email_id}` />
}

//On Render
<WebView source={{ uri: this.state.url }} />

这篇关于如何将值从响应本机状态传递到WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！