Мой компонент списка исчезает, когда я ухожу и возвращаюсь на вкладку

Question

Я использую React Navigation v2 для своего приложения React Native и использую навигатор по вкладкам. Основная вкладка (лента сообщений) выглядит так, когда она впервые отображает . После выбора одной из двух других вкладок и перехода обратно на мою главную вкладку, она выглядит примерно так . По какой-то причине панель ввода отображается нормально, но список исчезает, пока я не отправлю сообщение снова. Тогда список каналов (включая новый пост) появится на экране.

В методе жизненного цикла componentDidMount () я вызываю действие с именем fetchFeed (), которое извлекает все данные фида из базы данных firebase и сохраняет их в состояние (которое затем сопоставляется с реквизитами с избыточностью). Метод renderFeed () вызывается в методе render () и организует feedData в компоненте List (из nativebase).

Я не уверен, почему строка ввода отображается, когда нет, но я сделал предположение, что мне нужно вызвать какое-то изменение состояния, например, снова вызвать метод fetchFeed (), когда я вернусь к главная вкладка.

До сих пор я пытался использовать функцию navigationEvents из React Navigation, чтобы запустить метод при переходе пользователя назад, но даже просто пытался сохранить журнал в журнале с помощью этой функции, например:

<NavigationEvents
  onWillFocus={payload => {
  console.log("will focus", payload);
  }}
/>

выдает ошибку: «Недопустимый тип элемента: ожидается строка ...»

Я не знаю, что попробовать дальше ... Буду очень признателен за любую помощь / совет, который вы можете дать! Код ниже:

class FeedScreen extends Component {
  static navigationOptions = {
      title: 'Announcements',
      headerStyle: {
        backgroundColor: '#ff0000',
      },
      headerTintColor: '#fff',
    };

  componentDidMount() {
    this.props.fetchFeed(this.props.organization);
    this.registerForPushNotifications();
  }

  renderFeed = () => {
    const random = Math.floor((Math.random() * 100) + 1);
    const listKey = `${random}${this.props.loadingList}`;
    if (this.props.loadingList) {
      return <Spinner />;
    } else if (this.props.error) {
      return (<Text>{this.props.error}</Text>);
    } return (
      <List
        key={listKey}
        enableEmptySections
        dataArray={this.props.feedData}
        renderRow={this.renderPost}
        keyExtractor={(post) => post.key}
      />
    );
  }

    .
    .
 //several unrelated methods
    .
    .

    render() {
    return (
      <Container>
        <Content>
          <View style={styles.messageBoxContainer}>
            <Input
              onChangeText={this.props.postChanged.bind(this)}
              value={this.props.postContent}
              style={styles.messageBox}
              multiline
            />
            {this.renderButton()}
          </View>
          {this.renderFeed()}
        </Content>
      </Container>
    );
  }
}

    .
    .
    .
//styles object and mapStateToProps

Answer 1

Вы должны зарегистрировать push-уведомления в своем конструкторе.

Посмотрите на эту ссылку для более подробного примера: https://www.pubnub.com/blog/react-native-push-notifications-ios-android/

Answer 2

Вот как я настроил willFocus слушатель для React Navigation v2

componentDidMount() {
  this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocus);
}

componentWillUnmount() {
  if (this.willFocusSubscription) {
      this.willFocusSubscription.remove();
  }
}

willFocus = (payload) => {
  // do stuff here 
}

Я не уверен, почему ваш список исчезает.Может ли feedData быть установленным в пустой массив?