Shoutem v5如何處理多級導航？

Question

這些示例不顯示如何從一個屏幕鏈接到另一個屏幕。這可能使用Shoutem v5 web界面嗎？

Answer 1

在Shoutem的文檔中檢查herenavigateTo Redux動作創建者。使用該功能很容易導航到另一個屏幕。你只需調用它並將它傳遞給屏幕name和道具。如果您想從當前分機中打開屏幕，請使用app/extension.js文件中的ext功能。

這裏的畫面文件：

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個不同的擴展爲好。由於擴展代表獨立的功能，所有的屏幕已經鏈接在內部。這就是爲什麼你不能在構建器內部手動執行此操作，但是在代碼中這樣做與上面的代碼一樣簡單。