React Navigation - 使用 navigation.navigate 在路由器上传递数据

Question

我似乎无法使用navigation.navigate 将数据传递到选定的屏幕。它适用于其他任何地方，但在标题中

// Router.js
const ResultStack = StackNavigator({
  Result: {
    screen: Result,
    navigationOptions: ({ navigation }) => ({
     headerTintColor: "#FFF",
     headerLeft: (<Button onPress={() => navigation.goBack(null)} />),
     headerRight: (<Button onPress={() => navigation.navigate('Lab', { someKey: SomeValue }) } />),
    }),
  ...
  }
})

理想情况下，我想将navigation.state.params 上的视图状态传递到下一个屏幕，因此它应该看起来像headerRight: ( navigation.navigate('Lab', navigation.state.params} />)，但它不起作用。

这可能吗？还是我必须为此使用 Redux（这似乎有点矫枉过正）。

编辑

在尝试将数据传递到另一个堆栈时，此方法似乎不起作用。

我正在使用 Spencer Carl 的设置 - Getting Started React Navigation

在此示例设置中，如何将数据从 ResultStack 传递到 LabStack

export const ResultStack = StackNavigator({
  Result: {
    screen: Result,
    navigationOptions: ({ navigation }) => ({
     headerTintColor: "#FFF",
     headerLeft: (<Button onPress={() => navigation.goBack(null)} />),
     headerRight: (<Button onPress={() => navigation.navigate('Lab', { someKey: SomeValue }) } />),
    }),
  ...
  }
})

export const LabStack = StackNavigator({
 Lab: { ... }
 ...
})

export const TabStack = TabNavigator({
 ResultStack: { ... }
 LabStack: { ... }
})

export const Root = StackNavigator({
  ...
  Main: {
    screen: TabStack,
    navigationOptions: {
      header: null,
    }
  },
});

Answer 1

我认为您不需要为此使用 redux。我设法用以下方法做到了。它几乎与您的代码相同。刚刚在按钮上添加了标题。

const ResultStack = StackNavigator({
  Result: { screen: Result,
    navigationOptions :({ navigation }) =>  ({
      title: 'Page 2 SettingsTab',
      headerTintColor: "#FFF",
      headerLeft: (<Button title='Back' onPress={() => navigation.goBack(null)} />),
      headerRight: (<Button title='Back' onPress={() => navigation.navigate('Lab', { someKey: 'SomeValue' }) } />),
   }), 
  },
});

然后 someKey 在实验室中通过

console.log(this.props.navigation.state.params.someKey)

如果您想将值作为navigation.state.params 传递。这些参数必须在您正在导航的屏幕上可用，否则这些参数将在下一个屏幕中未定义。