Shoutem v5如何处理多级导航?

时间:2017-04-10 13:18:55

标签: shoutem

这些示例并未显示如何从一个屏幕链接到另一个屏幕。这是否可以使用Shoutem v5 Web界面?

1 个答案:

答案 0 :(得分:2)

在Shoutem的文档中查看navigateTo Redux操作创建者的here。使用该功能可以轻松导航到另一个屏幕。你只需调用它并传递一个屏幕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个不同的扩展程序。由于扩展代表了不同的功能,因此所有屏幕都已在内部链接。这就是为什么你不能在构建器内手动执行此操作的原因,但在代码中执行此操作就像上面的代码一样简单。