如何将 Props 传递给 Navigator？

Question

所以，我有这样一个层次结构：

MyList ---> MyListNav

MyList 是一个包含我的东西列表的屏幕； MyListNav 是StackNavigator 被Modal 包裹，以便在按下MyList 屏幕上的Add New Stuff 按钮时弹出一个小窗口。

作为StackNavigator，MyListNav 有两个屏幕：

export default class Test extends Component {

    constructor(props){
        super(props)
        this.state = {
          isVisible: false
          }

        FVN = StackNavigator({
          Find: {screen: Find},
          Add: {screen: Add},
        },{
          mode: 'card',
          headerMode: 'none',
          cardStyle: {
            opacity: 1,
            backgroundColor: 'transparent',
          },
          // ...some transitioning configurations
        })
    }

    render() {
      return(
        <Modal
         isVisible={this.props.isVisible} avoidKeyboard>
         <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
           <View style={styles.modal}>
             <FVN screenProps = {{isVisible: false}}/>
           </View>
         </TouchableWithoutFeedback>
        </Modal>
      )
    }

我知道这不是一种常见的做法，但我需要这样做，因为这是我发现在模态中导航的唯一方法，而且我正在为 iPad 这样做。

至于Find 和Add，它们都有一个自定义的CLOSE 按钮来关闭MyListNav 模态。

现在的问题是，我知道如何将参数从MyListNav(child) 传递给MyList(parent)，并使用MyList 中的状态来控制MyListNav 的可见性。但我无法找到将 Find 或 Add 的道具或状态传递给 MyListNav 的方法。或者说，我无法找到将按下CLOSE 按钮传递给MyListNav 的方法，正如我所尝试的那样，似乎Find/Add 和MyListNav 之间的关系不是儿童和parent，因此不能使用回调函数来这样做。

是否有任何常规解决方案？还是我在哪里弄错了？？

Answer 1

react-navigation 在您想将道具传递到屏幕时有点受限。

如果您不使用redux，您的选择将非常有限。

您可以做的是通过 screenProps 将初始化导航的组件中的道具传递到您的屏幕，您已经在此处执行此操作：<FVN screenProps = {{isVisible: false}}/>。

在您的Find 和Add 屏幕中，您还应该能够看到/访问isVisible 属性。

所以你可以这样做：

<FVN screenProps = { { isVisible: false, findProps: {}, addProps: {} } }/>

希望对你有帮助