Question

我想知道是否可以在不使用导航器的情况下传递属性？我想要做的是将道具传递给位于我的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');
}

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

1 个答案: