不使用导航器的 React-Native 传递道具？

Posted 2023-03-14

【中文标题】不使用导航器的 React-Native 传递道具？

【英文标题】：React-Native passing props without using navigator?

【发布时间】：2016-01-24 03:56:04

【问题描述】：

我想知道是否可以在不使用导航器的情况下传递属性？我想要做的是将道具传递给位于我的 index.ios.js 中的 webview。

基本上，我的 index.ios.js 中有一个不可见的 iframe，它允许歌曲在整个应用程序中播放，尽管视图发生了变化，但我需要在按下按钮时更新 WebView 的源代码。

我的 index.ios.js 看起来像这样：

class queueThat extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      source: ''
    ;
  



  render() 
    return (
      <View style=styles.container>
      <View style=styles.iframe>
        <WebView html=this.props.source />
      </View>
      <React.NavigatorIOS
        style=styles.container
        initialRoute=
          title: 'queueThat',
          component: SearchPage, 
        />
        </View>

    );
  

我的搜索结果页面按下功能如下：

  rowPressed(rowID) 
    this.setState(source: '<iframe   scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + this.props.collection[rowID].id + '&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>')
    console.log(this.state.source)
    this.props.navigator.push(
      passProps: source: this.state.source
    )
  

我正在尝试将源代码传递给位于我的 index.ios.js 中的 WebView html，而不离开当前视图。 PS - 我对 JS 和 React 很陌生。

【参考方案1】：

您可以通过在 queueThat 类中创建 set 方法并将其传递给另一个组件来实现。

index.ios.js

class queueThat extends React.Component 

  ...

  // Your setSource method to update state from other component
  setSource = (source) => 
    this.setState(source: source);
  ;

  render() 
    return (

      ...

      <React.NavigatorIOS
        style=styles.container
        initialRoute=
          title: 'queueThat',
          component: SearchPage, 
          passProps:  setSource: this.setSource 
        />

      ...

    );
  

搜索结果功能

rowPressed(rowID) 

  ...

  //Calling parent component setSource method, which was passed through props
  this.props.setSource('Your new source');