【问题标题】：React Native Passing data to another screen using NavigationEventsReact Native 使用 NavigationEvents 将数据传递到另一个屏幕
【发布时间】：2020-01-22 19:55:16
【问题描述】：

我有一个 FlatList，它将呈现包含相应数据源的 3 行数据。在本例中，我创建了 3 行反馈数据。

我想将我按下的行的feedbackLogId传递到另一个屏幕，它将根据feedackLogId深入显示Feedback的详细信息。

FeedbackLogs.js

这就是生成三个 FlatList 行的数据的样子。由于数据被获取，它被设置为dataSource的状态。

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

这是我的 FlatList 的 onPress 方法，它将导航到详细信息屏幕。

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 的状态，它根本没有给我任何回应。我还更新了 react-navigation，因为有人说它可能会导致问题。我仍然无法解决问题，任何帮助将不胜感激。谢谢！

编辑：

这可能是我的导航问题，因为我的反馈日志屏幕位于 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
  }
})

我不确定在这里调用屏幕是否会扰乱数据的传递，因此我想把它留在这里。感谢您的帮助！

【问题讨论】：

在渲染方法中，你是console.log(this.state.feedbackId)。当你 console.log(payload) 时会出现什么？
您是否确保通过导航发送预期的数据？我的意思是，我认为this.state.feedbackLogId 在导航之前不会被更新。我宁愿发送this.state.dataSource[0].feedbackLogId 代替
旁注：setState 是异步的。因此，在之后设置和记录状态可能不起作用。您可以像stackoverflow.com/a/40408976/1309377 那样向 setState 的第二个参数添加回调，然后在那里调用控制台日志。这假设您设置了正确的状态变量。
@CoryBaker 当我使用 console.log() 时，终端没有显示任何内容。我觉得willFocusAction 根本没有被调用。
我在使用大约 10 个具有不同导航器（例如 Drawer、BottomTab、TabNavigators 和 Stacks）的屏幕时，是否可能弄乱了 Navigation.js 中的屏幕。

标签： javascript react-native react-navigation

【解决方案1】：

您可以使用navigation.getParam/navigation.state.params 访问参数。

当你这样做时：

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

您可以在FeedbackDetails 屏幕中访问它，例如：

const value = navigation.getParam('value')

NavigationEvents 与参数无关。

【讨论】：