【问题标题】:v2 Navigation.showModal creating new component instance but not actually navigating to itv2 Navigation.showModal 创建新组件实例但实际上并未导航到它
【发布时间】:2019-06-26 09:08:41
【问题描述】:

我正在尝试使用 react-native-navigation v2(版本 2.8.0)执行最简单的 showModal 动画,但我无法让新屏幕弹出旧屏幕。新组件在其componentDidMount 函数中记录了日志,但导航没有发生。

我已尝试从所有教程和文档中复制和粘贴“工作”代码。

// I Registered the component
Navigation.registerComponent('Test', () => TestView)

// I set the root (and it appears as expected)
Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            name: 'Test'
          }
        }]
      }
    }
  })


// Here is the Component I'm trying to call `showModal` from
export default class TestView extends React.Component<any, any> {

  constructor(props) {
    super(props)
    Navigation.events().bindComponent(this)
  }

  public componentDidMount() {
    console.log('***MOUNT***')
  }

  public render() {
    return (
      <TouchableOpacity style={ { flex: 1 } } onPress={ this.navigate }>
        <View style={{ flex: 1, backgroundColor: '#c3c3c3' }} />
      </TouchableOpacity>
    )
  }

  private navigate = () => {
    Navigation.showModal({
      component: {
        name: 'Test',
        options: {
          modalPresentationStyle: OptionsModalPresentationStyle.overFullScreen,
        }
      }
    })
  }

}```

When the navigate function is called, the log in `componentWillMount` hits (again) but nothing else happens and the root component remains on screen. I'm convinced I'm doing something stupid so hopefully a few more sets of eyes will help. Thanks.


【问题讨论】:

  • 嘿!我有同样的问题。有什么解决办法吗?
  • 仅限 iOS,Android 工作正常
  • 你能找到解决办法吗?

标签: react-native wix-react-native-navigation


【解决方案1】:

我的问题是没有为传入堆栈正确设置id。这是我正在使用的当前模式。

Navigation.showModal({
        stack: {
            id: screen,
            children: [{
                component: {
                    id: id,
                    name: screen,
                    passProps: props
                }
            }]
        }
    })

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-20
    • 1970-01-01
    • 2019-02-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多