Реагируйте на встроенную навигацию с помощью приставки - PullRequest
Новая
       26

Реагируйте на встроенную навигацию с помощью приставки

0 голосов
/ 09 июня 2018

У меня есть компонент «Входящие», который получает все уведомления с сервера и списки в представлении.Код, для которого выглядит так: 

import React, { Component } from 'react'
import {
  View,
  FlatList,
  ActivityIndicator,
  TouchableOpacity
} from 'react-native'

import {List, ListItem, SearchBar} from 'react-native-elements'
import Header from '../common/Header'
import { Container } from 'native-base'
import PushNotifications from '../../fcm/notifications/PushNotifications'
import NotificationDetails from './NotificationDetails';

export const Navigator = new StackNavigator({
  NotificationList: { screen: NotificationList },
  NotificationDetail: { screen: NotificationDetail },
},{
  initialRouteName: 'NotificationList',
})

class NotificationList extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false
    }
    this.loadNotificationDetails = this.loadNotificationDetails.bind(this)
  }

  componentDidMount() {
    const{dispatch,actions} = this.props
    dispatch(actions.getNotification())
  }

  handleRefresh = () => {
    this.setState(
      {
        page: 1,
        seed: this.state.seed + 1,
        refreshing: true
      },
      () => {
        const{dispatch,actions} = this.props
        dispatch(actions.getNotification())
      }
    )
  }

  handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1
      },
      () => {
        const{dispatch,actions} = this.props
        dispatch(actions.getNotification())
      }
    );
  }
  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />
  }

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    )
  }

  loadNotificationDetails = () => {
    this.props.navigation.navigate('NotificationDetails')
  }

  render() {
    return (
      <Container >
        <Header />
        <List containerStyle={{ marginTop: 0, borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList
            data={this.props.listNotification}

            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => this.loadNotificationDetails()}>
                <ListItem
                  roundAvatar
                  title={`${item.text}`}
                  subtitle={item.dateTime}
                  // avatar={{ uri: item.picture.thumbnail }}
                  containerStyle={{ borderBottomWidth: 0 }}
                />
              </TouchableOpacity>
            )}
            ItemSeparatorComponent={this.renderSeparator}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
            onRefresh={this.handleRefresh}
            refreshing={this.state.refreshing}
            onEndReached={this.handleLoadMore}
            onEndReachedThreshold={50}
          />
        </List>
        <PushNotifications />
      </Container>
    )
  }
}

export default NotificationList;

Теперь, чего я хочу добиться, нажав на любой элемент списка, я хочу загрузить полное подробное уведомление.Что происходит, когда я нажимаю, кажется, отсутствует объект навигации.Следовательно его жалоба не может найти свойство навигации.В реквизитах есть только предметы из хранилища редуксов, я не могу понять, как мне получить навигационные реквизиты в этот компонент, который уже имеет реквизиты из хранилища редуксов?Как мне этого добиться?Любая помощь очень ценится.

Спасибо, Викрам

1 Ответ

0 голосов
/ 10 июня 2018

StackNavigator - это фабричная функция вместо конструктора.Вы пробовали 

const Navigator = StackNavigator({
  NotificationList: { screen: NotificationList },
  NotificationDetail: { screen: NotificationDetail },
},{
  initialRouteName: 'NotificationList',
})

Это немного сбивает с толку, однако в v2 команда меняет API на createStackNavigator.

...