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

Question

我想知道是否可以在不使用导航器的情况下传递属性？ 我想要做的是将一个prop传递给位于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 width="100%" height="0" 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非常陌生。

Answer 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');
}