React-Native在不使用導航器的情況下傳遞道具？

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

我試圖源傳遞到位於HTML網頁視圖我的index.ios.js沒有從當前視圖導航。
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'); 
}