Question

我有一个组件，我有我的＆＃34;导航＆＃34;组件组合。现在，如果我按下TouchableHighlight，我想从抽屉里调用navigator.push。那可能性如何？

以下是我的代码的一部分：

＆＃13;

/** Combined components (Index.js)

export default class Index extends Component {
    render() {
        return (
            <Drawer>
                <Toolbar />
                <Nav />
            </Drawer>
        )
    }
}

＆＃13;

/** Drawer (Drawer.js)

export default class Drawer extends Component {
    render() {
            
        var navigationView= (
        <View>
            <TouchableHighlight>
                <Text>Login</Text>
            </TouchableHighlight>
        </View>
        )
        
        return (
            <DrawerLayoutAndroid
                draweWidth={300}
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}>
                
                {this.props.children}
                
            </DrawerLayoutAndroid> 
        )
    }
}

/** Toolbar (Toolbar.js)

export default class Toolbar extends Component {
    render() {
        return (
            <ToolbarAndroid
                style={{height: 50}}
                title="App"
            />
        )
    }
}

/**Navigator (Nav.js)

export default class Nav extends Component {
    
    renderScene(route, navigator) {
        switch(route.name) {
            case 'Welcome':
                return <Welcome navigator={navigator} />
            case 'Login':
                return <Login navigator={navigator} />
        }
    }
    
    render() {
        return (
            <Navigator
                initialRoute={{name: 'Welcome', index: 0}}
                renderScene={(route,navigator) => this.renderScene(route, navigator)}
            />
        )
    }
}

＆＃13;

Answer 1

您可以使用refs和回调函数来实现这一目标。

另外，Navigator正在被弃用，而不是新的API

/** Combined components (Index.js)

export default class Index extends Component {
    render() {
        return (
            <Drawer onNavigate={(route) => {
                                 this.refs.nav.push(route)
                               }>
                <Toolbar />
                <Nav ref="nav"/>
            </Drawer>
        )
    }
}

/** Drawer (Drawer.js)

export default class Drawer extends Component {
    render() {
            
        var navigationView= (
        <View>
            <TouchableHighlight onPress={() => {
                                          this.props.onNavigate({name:'Login'});
                                        }}>
                <Text>Login</Text>
            </TouchableHighlight>
        </View>
        )
        
        return (
            <DrawerLayoutAndroid
                draweWidth={300}
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => navigationView}>
                
                {this.props.children}
                
            </DrawerLayoutAndroid> 
        )
    }
}

/** Toolbar (Toolbar.js)

export default class Toolbar extends Component {
    render() {
        return (
            <ToolbarAndroid
                style={{height: 50}}
                title="App"
            />
        )
    }
}

/**Navigator (Nav.js)

export default class Nav extends Component {
    
    renderScene(route, navigator) {
        switch(route.name) {
            case 'Welcome':
                return <Welcome navigator={navigator} />
            case 'Login':
                return <Login navigator={navigator} />
        }
    }
    
    push(route) {
        this.refs.navigator.push(route);
    }
    render() {
        return (
            <Navigator ref="navigator"
                initialRoute={{name: 'Welcome', index: 0}}
                renderScene={(route,navigator) => this.renderScene(route, navigator)}
            />
        )
    }
}

用抽屉导航

1 个答案: