编辑：

Question

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

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

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

问题出在这里，我将可以成功导航到FeedbackDetails屏幕。在这里，我希望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中。这也是我调用“反馈详细信息”屏幕的地方。

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与参数无关。

使用NavigationEvents将本机传递数据反应到另一个屏幕

FeedbackLogs.js

FeedbackDetails.js

编辑：

1 个答案: