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

【问题标题】：React-Native passing props without using navigator?不使用导航器的 React-Native 传递道具？
【发布时间】：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 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 很陌生。

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案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');
}

【讨论】：