React Native的导航器 - 当passProps中的数据发生变化时，不会重新渲染组件吗？

Question

我设法将属性从父级传递给子级并传递给它的兄弟级别（在另一个场景中）。但是，当父节点上的数据发生变化时（即firebase发送新数据），兄弟节点不会重新渲染！我必须回到初始场景，然后再次导航到Sibiling场景以触发重新渲染。

这是一个错误吗？或者为什么sibiling不会重新渲染？

这是我的导航器组件：

var React = require('react-native');
var {
  StyleSheet,
  View,
  Text,
  Component,
  Animated,
  PanResponder,
  TouchableHighlight,
  Navigator,
  ScrollView
} = React;



var Loading = require('../components/loading.ios');
var Rebase = require('re-base');
var base = Rebase.createClass('https://somedb.firebaseio.com');

class NavLayer extends Component {

  renderScene(route, nav) {
    console.log('route!', route.component);
      console.log('route.passProps', route.passProps);

    switch (route.component) {
      case 'Parent':
        return <Parent navigator={nav} />;

      case 'Child':
            return <Child navigator={nav} items={route.passProps.items} />;
      case 'Sibling':
            return <Sibling navigator={nav} items={route.passProps.items} />;
      case 'MainContainer':
          return <MainContainer navigator={nav} />;

      default:
        return (
          <Parent
            navigator={nav}
          />
        );
    }
  }

    render () {

        console.log("Render NavLayer");

        return (

          <Navigator
            initialRoute={{component: 'Parent', title: 'Index', index: 0}}
            renderScene={this.renderScene}
          />
        );
    }
};

这是我的父组件（从Firebase获取数据并相应地重新渲染）

class Parent extends Component {
  constructor(props) {
  super(props);

  this.state = {
    items: [],
    loaded: false,
  }
}

componentDidMount() {

  base.listenTo('items', {
    context: this,
    asArray: true,
    then(data){
      this.setState({items: data});
      this.setState({loaded: true});
    }
  })
}

renderLoadingView() {
  return (
    <Loading text={'Loading...'} color={'#0000ff'}/>

  );
}

  render() {

    console.log("Render Parent");

    if (!this.state.loaded) {
    return this.renderLoadingView();}

      return (
        <View style={styles.container}>
        <View><Text>Parent: {this.state.items}</Text></View>
          <Child navigator={this.props.navigator} items={this.state.items} />
          </View>
      );
  }
};

这是我的子组件（在更新Firebase时重新呈现）

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
    }
  }

  goToSibling() {

    this.props.navigator.push({

              name: 'Sibling',
              component: 'Sibling',
              passProps: {items: this.props.items},
            });

      }


  render() {

    console.log("Render Child");


      return (
        <View>
        <View>
          <Text>Child via Props: {this.props.items}</Text>
          <TouchableHighlight onPress={this.goToSibling.bind(this)}><Text>Navigate to     Sibling</Text></TouchableHighlight>    
        </View>    


          </View>
      );
  }
};

这是我在新场景中的Sibiling组件（在Firebase更新时不会重新渲染）

class Sibling extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: this.props.items,
    }
  }


  render() {

    console.log("Render Sibling");


      return (
        <View>
        <View>
          <Text>Sibling via Props: {this.props.items}</Text>
        </View>


          </View>
      );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'purple',
  }
});

module.exports = NavLayer