如何将值从反应本机状态传递到 webview答案

【问题标题】：How to pass value from react native state to webview如何将值从反应本机状态传递到 webview
【发布时间】：2020-07-14 19:29:37
【问题描述】：

我在我的 react native 项目中使用了 react-native webview 包。

我确实想将 react native 中的参数传递给 url 以显示在 webview 中

我的反应原生代码。

在这里，我可以从登录页面检索用户电子邮件。我想将电子邮件 ID 传递给 url 或页面。

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=abcd@gmail.com'
        }}
        
      />
    );
  }
}

export default NewScreen;

我的预期结果。

const email_id = this.props.route.params.email -> 保存用户的email id。

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

webview 中的 php url uri = https://xxx/add-new-submit-form.php?email=abcd@gmail.com'

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

【问题讨论】：

标签： php reactjs react-native android-webview react-native-navigation

【解决方案1】：

有多种方法可以做到这一点。这应该可以工作：

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 }} />

【讨论】：