ネイティブナビゲーターの親コンポーネントが反応した後にネイティブナビゲーターの親コンポーネントが描画されない

Question

Navigatorに問題があります。2つのシーンがあります。メインシーンにはListViewがあり、2番目のシーンには選択リストが含まれています。メインシーンのListView ...問題は、2番目のシーンから戻ったときに、ListViewのフィルタリングされた要素が描画されない...行が表示されているが空です。

私は別の色で行のスタイルを設定し、色が正しく表示されている、私は何とかListViewコンポーネントのレンダリングを強制する必要がありますか？はいの場合、どうすればいいですか？ここ

コードの一部は、（私は無関係な部分を削除した）である：

class App extends Component { 
    renderScene(route, navigator) { 
    switch (route.id) { 
     case 'Main': 
     return (<Main navigator={navigator} />); 
     case 'FilterByBrand': 
     return (<FilterByBrand navigator={navigator} brands={route.brands} callback={route.callback}/>); 
    } 
    } 

    render() { 
    return (
     <Navigator 
     initialRoute={{id: 'Main'}} 
     renderScene={this.renderScene} 
     /> 
    ); 
    } 
} 

-

-

class Main extends Component { 
    // code removed (irrelevant) 

    updateBrands(brands) { 
    var filter = {}; 

    // code to generate filter to be used not shown, is working ok 

    this.setState({ brandFilter: filter }); 
    } 

    render() { 
    return (
     <Container> 
     <Header> 
      <Button> 
      <Icon name='md-pricetags' 
       onPress={()=>this.props.navigator.push({ 
       id: 'FilterByBrand', 
       brands: this.state.brands, 
       callback: this.updateBrands} 
      )} 
      /> 
      </Button> 
     </Header> 
     <Content> 
      <ProdList 
      item={this.state.items} 
      brandFilter={this.state.brandFilter} 
      /> 
     </Content> 
     </Container> 
    ); 
    } 
} 

-

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

    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this._filter = this._filter.bind(this); 
    this._genRow = this._genRow.bind(this); 
    } 

    _genRow(item) { 
    // code not shown (irrelevant) 
    } 

    _filter() { 
    let output = this.props.items; 

    // filtering code not shown, working ok 
    return output; 
    } 

    render() { 
    var dataSource = this.dataSource.cloneWithRows(this._filter()); 
    return (
     <ListView 
     style={styles.container} 
     dataSource={dataSource} 
     renderRow={this._genRow} 
     enableEmptySections={true} 
     /> 
    ); 
    } 
} 

class FilterByBrand extends Component { 

    selectBrand(id) { 
    brands = // save here the selected brands 

    // callback 
    this.props.callback(brands); 

    this.setState({brands: brands}); 
    } 

    render() { 
    return (
     <Container> 
     <Header> 
      <Button transparent onPress={()=>this.props.navigator.pop()}> 
      <Icon name='ios-arrow-back' /> 
      </Button> 
      <Title>Select brand(s)</Title> 
     </Header> 
     <Content> 
      <List 
      dataArray={this.state.brands} 
      renderRow={ (brand) => 
       <ListItem onPress={() => this.selectBrand(brand.id)}> 
       <Text>{brand.name}</Text> 
       </ListItem> 
      } 
      /> 
     </Content> 
     </Container> 
    ); 
    } 
} 

Answer 1

あなたはrefを追加することを忘れているかもしれません。

var navigator; 

class App extends Component { 
    renderScene(route, navigator) { 
    switch (route.id) { 
     case 'Main': 
     return (<Main navigator={navigator} />); 
     case 'FilterByBrand': 
     return (<FilterByBrand navigator={navigator} brands={route.brands} callback={route.callback}/>); 
    } 
    } 

    render() { 
    return (
     <Navigator 
     ref={(nav) => { navigator = nav; }} 
     initialRoute={{id: 'Main'}} 
     renderScene={this.renderScene} 
     /> 
    ); 
    } 
}