Question

从昨天开始，我一直在尝试使用此方法，尝试了不同的方法，但实际上都没有。我目前正在使用抽屉式导航器，标签式导航器，并且想在单击图标时打开其他场景。

这是当前的设计：

我要打开新场景的图标是右上角的“过滤器”。我当前的标头代码是：

<Header>
    <Left>
        <Icon name='ios-menu' style={{ color: 'white' }} onPress={() =>
            this.props.navigation.dispatch(DrawerActions.openDrawer())} />
    </Left>
    <View style={{ width: Dimensions.get('window').width * 0.7 }}>
        <Text style={styles.headerTextTop}>Estabelecimentos</Text>
    </View>
    <Right>
        <Icon name='ios-search' style={{ paddingRight: 20, color: 'white' }} />
        <Icon name='ios-options' style={{ color: 'white' }} onPress={this.openFilter} />
    </Right>
</Header>

这是函数openFilter：

openFilter = () =>
{
    this.props.navigation.navigate('Filter');
}

我正在从其.js文件中导入过滤器组件，但无法切换场景。

这是Filter.js（我将从'./Filter'作为导入过滤器导入）：

import React, { Component } from "react";
import {
    View,
    Text,
    Dimensions
} from "react-native";

import { Icon, Header, Left, Right } from 'native-base'

class Filter extends Component {
    render() {
        return (
            <View>
                <Header>
                    <Left>
                        <Icon name='ios-arrow-back' style={{color: 'white'}} onPress={() =>
                            this.props.navigation.goBack()} />
                    </Left>
                    <View style={{ width: Dimensions.get('window').width * 0.7 }}>
                        <Text style={sty.headerTextTop}>Filtro</Text>
                    </View>
                    <Right>
                    </Right>
                </Header>
            </View>
        );
    }
}

export default Filter;

-编辑：- 正如@Pritish Vaidya所建议的那样，我应该实现一个Stack Navigator，所以我做了一个：

import { StackNavigator} from 'react-navigation'
import Filter from './Filter';
import App from './App';
import Home from './Home';

const stackNav = StackNavigator({
    App: {
        screen: App,
        navigationOptions:({navigation}) => ({
            title: "Main",
            headerStyle: { paddingRight: 10, paddingLeft: 10 }
        })
    },
    Filter: {
        screen: Filter,
        navigationOptions: (props) => ({
            title: "Filtro",
        })
    },
    Home: {
        screen: Home,
        navigationOptions: (props) => ({
            title: "Home",
        })
    }
})

export default stackNav;

但是在Home.js中，当我使用以下命令调用导航时

：

<Icon name='ios-options' style={{ color: 'white' }} onPress={() => this.props.navigator.navigate("Filter")} />

让我看到这个错误：

navigation.navigate不会更改场景

0 个答案: