同步postMessage

Question

有没有办法让postMessage成为“同步通话”？ 意思是：

• 从父级到iFrame执行postMessage
• 等到父母收到一条消息（从iFrame发送）

例如：

function doSomething() {
   targetiFrame.postMessage('actionA');
   handleMessage('actionA').then(function() {
      return true;
   });
}

function handleMessage(action) {
   return new Promise(function(resolve, reject) {
   });
}

当然，这不会起作用，因为我触发handleMessage只有在收到正确的消息时才会触发它。有没有办法等到收到'actionA'消息，然后只返回函数返回true？

Answer 1

我解决了这样的问题：

constructor(props){
    super(props);
    this.state = {
      activeIndex:0,
      carouselItems:[
        {
          title:"Item 1"
        },
        {
          title:"Item 2"
        },
        {
          title:"Item 3"
        },
        {
          title:"Item 4"
        },
        {
          title:"Item 5"
        },
      ]
    }
  }


  _renderItem({item,index}){
    return(
      <View style={{justifyContent:'center',alignItems:'center'}}>
        <Image source ={require('./assets/avatar.png')}/>
        <Text style={{color:'black'}}>{item.title}</Text>
        <TouchableOpacity onPress={ () => { this._carousel.snapToItem(index+1, true);}}>
        <Image source={require('./assets/bullet.jpg')} style={{width: 200, height: 150}}/>
</TouchableOpacity>
      </View>
    )
  }

  render() {
    // const scrollEnabled = this.state.screenHeight > height;
    return (
      <ScrollView style={styles.body}>
      <Header navigation={this.props.navigation}/>
  <Card> 
        <View> 
        <Carousel
              ref={ ref=> { this._carousel = ref; }}
              data={this.state.carouselItems}
              renderItem={this._renderItem}
              sliderWidth={250}
              itemWidth={250}
              renderItem = {this._renderItem}
              onSnapToItem={
                index => this.setState({activeIndex:index})
              }
            />
      </View>
      <TouchableHighlight            
            onPress={() => { this.carousel._snapToItem(this.state.activeIndex-1)}}>
            <Image source={require('./assets/bullet.jpg')} style={{height:10,width:10}}/>                
        </TouchableHighlight>
      </Card>`