如何将 Props 传递给 Navigator？

Question

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

MyList ---> MyListNav

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

作为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)，并使用[=中的状态11=] 来控制 MyListNav 的可见性。但是我无法找到一种方法将 Find 或 Add 的道具或状态传递给 MyListNav。或者说，我无法找到将 CLOSE 按钮的按下传递给 MyListNav 的方法，因为我已经尝试过了，看起来 Find/Add 之间的关系并且 MyListNav 不是 children 和 parent，因此不能使用回调函数来这样做。

有什么正规的解决办法吗？还是我哪里搞错了？？

Answer 1

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

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

您可以做的是通过 screenProps 将初始化您的导航的组件的道具传递到您的屏幕，您已经在这里做了：<FVN screenProps = {{isVisible: false}}/>.

在您的 Find 和 Add 屏幕中，您应该还可以看到/访问 isVisible 道具。

所以你可以这样做：

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

希望对您有所帮助

如何将 Props 传递给 Navigator？

How to pass Props to the Navigator?

reactjs

react-native

react-navigation