shoutem - Shoutem v5 如何处理多级导航？

Question

这些示例没有显示如何从一个屏幕链接到另一个屏幕。这可以使用 Shoutem v5 Web 界面吗？

Answer 1

在 Shoutem 的Redux action creator文档中查看此处。navigateTo使用该功能很容易导航到另一个屏幕。您只需调用它并将其传递给屏幕name和屏幕道具。如果要从当前扩展名中打开屏幕，请使用文件中的ext函数app/extension.js。

这是屏幕文件：

import React, {
  Component
} from 'react';

import {
  TouchableOpacity,
  Text
} from 'react-native';

import { navigateTo } from '@shoutem/core/navigation';
import { ext } from '../extension';
import { connect } from 'react-redux';

class Screen extends Component {
  // method inside Screen component
  render() {
    const { navigateTo } = this.props;

    return (
      <TouchableOpacity onPress={() => navigateTo({
        screen: ext('AnotherScreen'),
        props: { }
      })}>
        <Text>Click here!</Text>
      </TouchableOpacity>
    );
  }
}

// connect screen to redux store
export default connect(
  undefined,
  { navigateTo }
)(Screen)

这样，您也可以连接 2 个不同的扩展。由于扩展代表不同的功能，所有屏幕都已在内部链接。这就是为什么您不能在构建器中手动执行此操作，但在代码中执行此操作与上面的代码一样简单。