Question

我有一个收件箱组件，它从服务器获取所有通知并在视图中列出。看起来像的代码，

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;

现在我想要实现的是点击任何listItem，我想加载完整的详细通知。发生的事情是当我点击它似乎缺少导航对象。因此，它的抱怨无法找到导航属性。道具只有redux商店的商品，我无法理解如何将导航道具导入到已经拥有redux商店道具的这个组件中？我如何实现这一目标？非常感谢任何帮助。

谢谢，维克拉姆

Answer 1

StackNavigator是工厂函数而不是构造函数。你试过吗

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

这有点令人困惑，但是在第2版中，团队将api更改为createStackNavigator。

用redux反应原生导航

1 个答案: