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

我认为你不需要还原剂。我设法用以下方法做到了。它几乎与您的代码完全相同。刚刚在按钮上添加了标题。

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' }) } />),
   }), 
  },
});

然后在实验室中通过

到达某个键

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

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

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

1 个答案: