Реагировать на собственный Передача данных на другой экран с помощью NavigationEvents

Question

У меня есть FlatList, который будет отображать 3 строки данных, содержащих соответствующий источник данных. В этом примере я создал 3 строки данных Feedback.

Я хотел бы передать feedbackLogId строки, которую я нажал, на другой экран, который подробно покажет подробности Feedback в соответствии с feedackLogId.

FeedbackLogs. js

Так выглядят данные, которые сгенерируют три строки FlatList. поскольку данные извлекаются, они устанавливаются в состояние dataSource.

dataSource = [{
  "feedbackLogId": 1,
  "name": "Test1",
  "comment": "Hello",
}, {
  "feedbackLogId": 2,
  "name": "Test2",
  "type": "Hi",
}, {
  "feedbackLogId": 3,
  "name": "Test3",
  "type": "Morning",
}]

Это метод onPress моего FlatList, в котором он позволяет перейти к экрану сведений.

onPress={() => this.navigateFeedbackDetails()>

После нажатия кнопки будет вызван navigateFeedbackDetails.

navigateFeedbackDetails = () => {
    this.setState({
      feedbackLogId: this.state.dataSource[0].feedbackLogId
    }, () => this.props.navigation.navigate('FeedbackDetails', {value: this.state.feedbackLogId}))
  }

FeedbackDetails. js

Проблема заключается в том, где я буду успешно перемещаться к Обратная связь Подробный экран. Здесь я бы import { NavigationEvents } from 'react-navigation' для того, чтобы я мог получить доступ к NavigationEvents. Затем при рендеринге

render() {
        willFocusAction = (payload) => {
            let params = payload.state.params;
            let value = params.value;
            this.setState({ feedbackId: value });
            console.log(this.state.feedbackId);
        }

        return (
            <View style={styles.container}>
                <NavigationEvents
                    onWillFocus={this.willFocusAction}
                />
                <View style={styles.listView}>
                  <Text style={styles.label}>Name </Text>
                  <Text style={[styles.name, styles.name]}>{this.state.feedbackId}</Text>
                </View>
            </View>
    )
}

Я не смогу console.log данных, а также показать состояние feedbackId, он просто не дает мне никакого ответа. Я также обновил реагирующую навигацию, так как некоторые говорят, что это может быть причиной проблемы. Я все еще не могу решить проблему, и любая помощь будет принята с благодарностью. Спасибо!

Редактировать:

Это может быть проблема с моей навигацией, так как мой экран FeedbackLogs находится внутри TopTabNavigator.

Это поможет создать 2 вкладки поверх экран для меня, чтобы переключаться между журналами и ожидающих страниц. Поскольку у меня также есть bottomTabNavigator, это единственный способ сделать это.

const HomeTopTabNavigator = createMaterialTopTabNavigator({
//Feedback Details will be called on both screens in the future but I am testing on Pending for now
  Logs: {
    screen: Logs
  },
  Pending: {
    screen: Pending,
  }

После создания TopTab я храню экраны внутри HomeStack. Это также место, где я вызываю экран FeedbackDetails.

const HomeStack = createStackNavigator({
  HomeTopTabNavigator: HomeTopTabNavigator,
  FeedbackDetails: {
    screen: FeedbackDetails
  }
})

Я не уверен, что этот вызов экрана здесь испортит передачу данных, поэтому я хотел бы оставить это здесь. Спасибо за вашу помощь!

Answer 1

Вы можете получить доступ к параметрам, используя navigation.getParam / navigation.state.params.

Когда вы делаете:

navigation.navigate('FeedbackDetails', {value: this.state.feedbackLogId}))

Вы можете получить доступ к ним на экране FeedbackDetails, например:

const value = navigation.getParam('value')

NavigationEvents не имеет отношения к параметрам.