Question

我正在使用react native和redux。我想使用导航参数创建按钮，例如：

<Button
    title="Manage Course"
    onPress={() => {
      navigation.navigate('Manage Course', { itemId: 86});
    }}
  />

其他屏幕页面：

function ManageCoursePage({....}){
  useEffect(() => { 
    .....
  })
}
.....
function mapStateToProps(state, ownProps) { 
 // get ownProps itemId param from navigation? 
}

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage)

那么如何在mapStateToProps函数中将导航参数发送给ownProps？

能否请您帮助解决此问题？预先感谢

Answer 1

您可以使用ownProps.route.params

访问导航功能传递的参数。

function mapStateToProps(state, ownProps) { 
 const {itemId} = ownProps.route.params;
 ...
}

更新：根据您的小吃

您必须注意，导航不会直接呈现ManageCoursePage，而是在中间有一个中间栈，该中间栈正在接收路由参数，但不会在ManageCoursePage上转发它，因此您看不到它。 mapStateToPRops

您可以像转发它们

const CourseMangeStack = createStackNavigator()
function ManageCoureStackScreen({route}) {
  // console.log(route);
  return (
    <CourseMangeStack.Navigator>
      <CourseMangeStack.Screen
        name="Manage Course"

      >{
        props => <ManageCoursePage {...props} params={route.params}/>
      }</CourseMangeStack.Screen>
    </CourseMangeStack.Navigator>
  )
}

Check demo snack

从反应导航获取mapStateToProps路线参数

1 个答案: