Родительский компонент родного навигатора React не отображается после всплывающего окна

У меня проблема с Навигатором... У меня 2 сцены, основная сцена содержит ListView, а вторая сцена содержит список выбора, который позволяет мне фильтровать элементы ListView основной сцены... проблема в том, что когда Возвращаюсь со второй сцены, не отрисовываются отфильтрованные элементы 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>
    );
  }
}

person tvs    schedule 30.12.2016    source источник
comment
Я думаю, может быть, это связано с неправильным определением параметров функции _genRow. Параметры (rowData, sectionID, rowID, highlightRow) соответствуют документу, указанному здесь.   -  person max23_    schedule 30.12.2016
comment
Где вы передаете свойство paints компоненту ProdList? Или вы не показали тот код? Я вижу, что в ProdList передается только brandFilter   -  person coder hacker    schedule 30.12.2016
comment
coder hacker: я отредактировал код, чтобы исправить эту проблему (я сделал ошибку, удаляя части кода, чтобы опубликовать его здесь, но функция _filter работает довольно хорошо)   -  person tvs    schedule 30.12.2016
comment
max23: я не понимаю, почему параметры _genRow неверны... строки основного ListView отображаются правильно изначально... он ломается ТОЛЬКО после применения фильтра... не могли бы вы сказать мне, что не так?   -  person tvs    schedule 30.12.2016
comment
Извините, мой плохой, item параметр равен rowData параметру. Если вы не используете другие 3 параметра (например, sectionID и т. д.), я думаю, все будет в порядке. Кстати, можешь показать коды в функции _genRow?   -  person max23_    schedule 30.12.2016
comment
max23_: _genRow просто возвращает компонент View следующим образом: return ( ‹View›‹Text›{item.name}‹/Text›‹/View› );   -  person tvs    schedule 30.12.2016
comment
Какой результат возвращает функция _filter после того, как вы применили фильтр и вернулись к первой сцене?   -  person max23_    schedule 03.01.2017


Ответы (1)


может быть, вы забыли добавить исх.

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}
      />
    );
  }
}
person Shailesh Prajapati    schedule 30.12.2016
comment
Это ничего не делает; Я не думаю, что добавление ref действительно необходимо для работы Navigator. - person tvs; 30.12.2016