如何在React Native中同时传递Redux props与navigation参数

有两种常用的实现方式，根据你的项目技术选型选择即可：

方式1：使用Redux Hooks（推荐，适配Redux 7.1+版本） #

直接在组件内同时获取navigation参数和Redux相关数据即可，无需额外处理参数合并：

import { useSelector, useDispatch } from 'react-redux'
// 引入你自己的Redux action
import { updateData } from './src/redux/actions'

const TargetPage = ({ navigation, route }) => {
  // 获取navigation传递的参数
  const { itemId, otherParam } = route.params
  // 从Redux store取需要的状态
  const userData = useSelector(state => state.user.userData)
  const globalConfig = useSelector(state => state.app.config)
  // 获取dispatch方法触发Redux action
  const dispatch = useDispatch()

  // 业务逻辑示例：同时使用两类参数
  const handleSave = () => {
    dispatch(updateData({
      id: itemId,
      content: otherParam,
      user: userData
    }))
  }

  // 页面渲染逻辑
  return <></>
}

export default TargetPage

方式2：使用connect高阶组件（适配老版本Redux项目） #

connect方法不会覆盖React Navigation注入的navigation、route参数，会自动将Redux映射的参数和原有导航参数合并到组件props中：

import { connect } from 'react-redux'
// 引入你自己的Redux action
import { updateData } from './src/redux/actions'

const TargetPage = (props) => {
  // 获取navigation传递的参数
  const { itemId, otherParam } = props.route.params
  // 获取Redux映射的状态和方法
  const { userData, globalConfig, triggerUpdate } = props

  // 业务逻辑示例
  const handleSave = () => {
    triggerUpdate({
      id: itemId,
      content: otherParam,
      user: userData
    })
  }

  // 页面渲染逻辑
  return <></>
}

// 将Redux store中的状态映射到组件props
const mapStateToProps = state => ({
  userData: state.user.userData,
  globalConfig: state.app.config
})

// 将Redux action映射到组件props
const mapDispatchToProps = dispatch => ({
  triggerUpdate: payload => dispatch(updateData(payload))
})

// 直接用connect包裹组件即可，导航参数会自动透传
export default connect(mapStateToProps, mapDispatchToProps)(TargetPage)

注意事项 #

如果出现导航参数获取失败的情况，只需确认当前组件是直接注册到React Navigation的路由表中的页面即可，非路由子组件如果需要导航参数，可以由父路由页面传递，或者使用useRoute/useNavigation Hooks直接获取。

内容的提问来源于stack exchange，提问作者Lee