React导航+ Redux:如何将道具传递到StackNavigator？

React导航是一个用于构建导航功能的开源库，而Redux是一个用于管理应用状态的开源库。在React导航中，我们可以使用StackNavigator来创建一个堆栈导航器，用于管理页面之间的导航。

要将道具传递到StackNavigator，我们可以使用React导航提供的参数传递机制。具体步骤如下：

首先，确保你已经安装了React导航和Redux库，并在项目中引入它们。
创建一个包含所需页面的堆栈导航器。可以使用createStackNavigator函数来创建一个堆栈导航器，并在其中定义页面组件。

import { createStackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// 导入页面组件
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

// 创建堆栈导航器
const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

// 将Redux状态映射到组件的属性
const mapStateToProps = state => ({
  prop1: state.prop1,
  prop2: state.prop2,
});

// 将Redux操作映射到组件的属性
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      action1,
      action2,
    },
    dispatch
  );

// 使用connect函数将Redux状态和操作与导航器组件连接起来
export default connect(mapStateToProps, mapDispatchToProps)(AppNavigator);

在页面组件中，可以通过this.props来访问传递的道具和Redux状态。

import React from 'react';
import { View, Text } from 'react-native';

class HomeScreen extends React.Component {
  render() {
    const { prop1, prop2, action1, action2 } = this.props;

    return (
      <View>
        <Text>{prop1}</Text>
        <Text>{prop2}</Text>
        <Button onPress={action1} title="Action 1" />
        <Button onPress={action2} title="Action 2" />
      </View>
    );
  }
}

export default HomeScreen;

在上面的示例中，prop1和prop2是从Redux状态中获取的道具，action1和action2是Redux操作。通过connect函数，我们将这些道具和操作与页面组件连接起来。

这样，我们就可以在StackNavigator中传递道具并在页面组件中使用它们了。

关于React导航和Redux的更多信息，你可以参考以下腾讯云相关产品和文档：