réagit le composant parent du navigateur natif n'est pas dessiné après pop

Question

J'ai un problème avec Navigator ... J'ai 2 scènes, la scène principale contient un ListView et la deuxième scène contient une liste de sélection qui me permet de filtrer les éléments du ListView de la scène principale ... le problème est que quand je reviens de la deuxième scène, les éléments filtrés de ListView ne sont pas dessinés ... les lignes sont affichées mais elles sont vides

Je sais qu'elles sont affichées parce que J'ai stylisé les lignes avec une couleur différente et la couleur est montrée correctement, dois-je forcer le rendu du composant ListView en quelque sorte? Si oui, comment dois-je le faire?

Voici quelques parties du code (je l'ai enlevé les parties non pertinentes):

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

peut-être oublier de rajouter 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} 
     /> 
    ); 
    } 
}