如何向Navigator传递Props？附组件层级与代码场景说明

咱们先来理清楚这个组件的层级关系：

• MyList：这是展示物品列表的主屏幕，上面有个「添加新物品」按钮，点击后会触发弹出一个模态窗口。
• MyListNav：它是被Modal包裹的StackNavigator，里面包含两个子屏幕：Find和Add，负责模态窗口内的页面导航。

下面是补全后的具体代码实现示例：

import React, { Component } from 'react';
import { Modal, View, TouchableOpacity, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

// 假设Find和Add是已经定义好的业务组件
const Find = () => (
  <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
    <Text>Find 物品页面</Text>
  </View>
);
const Add = () => (
  <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
    <Text>Add 新物品页面</Text>
  </View>
);

export default class MyList extends Component {
  constructor(props){
    super(props);
    this.state = { isVisible: false };
  }

  // 定义被Modal包裹的StackNavigator
  MyListNav = StackNavigator({
    Find: { screen: Find },
    Add: { screen: Add },
  }, {
    mode: 'card',
    headerMode: 'none', // 隐藏默认导航头，让模态窗口更简洁
  });

  render() {
    const MyListNavComponent = this.MyListNav;
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        {/* MyList主屏幕的核心内容：物品列表+添加按钮 */}
        <Text>我的物品列表</Text>
        <TouchableOpacity 
          onPress={() => this.setState({ isVisible: true })}
          style={{marginTop:20, padding:10, backgroundColor:'#007AFF', borderRadius:5}}
        >
          <Text style={{color:'white'}}>添加新物品</Text>
        </TouchableOpacity>
        
        {/* 包裹导航器的模态窗口 */}
        <Modal
          visible={this.state.isVisible}
          animationType="slide"
          onRequestClose={() => this.setState({ isVisible: false })}
          style={{margin:50, borderRadius:10}}
        >
          <MyListNavComponent />
        </Modal>
      </View>
    );
  }
}

几个关键细节说明：

• 用state.isVisible控制模态窗口的显示/隐藏，点击添加按钮时切换状态即可唤起弹窗。
• StackNavigator的mode: 'card'是默认的卡片式切换效果，headerMode: 'none'可以去掉官方默认的导航栏，方便自定义弹窗内的导航样式。
• 如果是使用react-navigation v5+版本，语法会有调整（比如用createStackNavigator和NavigationContainer），但核心的模态导航逻辑是一致的。

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